score:2
i would like to highlight the below points before anything else
when a component’s props or state change, react decides whether an actual dom update is necessary by comparing the newly returned element with the previously rendered one. when they are not equal, react will update the dom.
even though react only updates the changed dom nodes, re-rendering still takes some time. in many cases it’s not a problem, but if the slowdown is noticeable, you can speed all of this up by overriding the
lifecycle
functionshouldcomponentupdate
(react.memo
if you are using function component)
coming to your example, i have inspected the dom and observed that only the respective like count
is updating in actual dom.
to combat with performance issue (noticeable slowdown in re-rendering), you can use approach suggested in jayshree wagh's answer as below
// posts.js
const handlelike = usecallback(id => {
setposts(posts => posts.map(
post => post.id === id ? ({ ...post, likecount: post.likecount + 1 }) : post
)
);
}, []);
// post.js
export default react.memo(post, (prevprops, nextprops) => prevprops.post === nextprops.post);
see the good example for usecallback.
avoid using index
as key
in case you are using it in actual code.
score:-1
i don't know how to do it with react hook but you can transform post component from functional component to class component, then use shouldcomponentupdate()
to choose what make your component re-render.
score:-1
i would add something like initializeapp in a global state and an actioncreator that you can call on your component, or you can use react.memo "https://reactjs.org/docs/react-api.html#reactmemo".
score:0
your handlers are recomputed on each render, making react.memo(post)
useless.
please use usecallback
hook
https://en.reactjs.org/docs/hooks-reference.html#usecallback
score:0
you should be using usecallback
on your handlelike
handler. the state setter should then be using a callback instead of a dependable value, like this:
const handlelike = usecallback((id) => {
setposts(
posts=>{
return posts && posts.map((post) =>
post.id === id ? { ...post, likecount: post.likecount + 1 } : post,
)
},
);
},[setposts]);
score:1
you can do something like this
const post = react.memo(
props => {...},
(prevprops, nextprops) => prevprops.post === nextprops.post
);
when the function returns true, the component will not be re-rendered
score:4
never use indexes as key as per react's official document. use of index as key in react component lead you to unwanted re-rendering.
let me explain in brief. a key is the only thing react uses to identify dom elements. what happens if you push an item to the list or remove something in the middle? it will change all the keys of other component as well and re-render them.
for improving more you can use react.memo and react.usecallback. you can find more details in this link
Source: stackoverflow.com
Related Query
- How to avoid re-render of children components
- How to avoid unmounting of children components when using JSX's map?
- How to avoid re-renders in React when using conditional Render and children node prop
- How to render react components by using map and join?
- How do I avoid 'Function components cannot be given refs' when using react-router-dom?
- how to render child components in react.js recursively
- How to avoid bind or inline arrow functions inside render method
- Facebook React.js: how do you render stateful components on the server?
- how to render multiple children without JSX
- How to render asynchronously initialized components on the server
- How to render different components based off device size?
- React Hooks - How to avoid redeclaring functions on every render
- How to avoid setState() inside render() when state depends on render
- Enzyme shallow render is rendering children components
- How I can render react components without jsx format?
- How do I render a string as children in a React component?
- How to render React components only once on startup?
- How can I unit test parent react components that call methods on children
- AWS Amplify - How to render components after sign in
- How to Listen for Events in children components in React Native?
- How to render components with query strings React-Router
- How to render two components inside a .md file for styleguidist in React?
- How to dynamically render list of components without re-rendering entire list with every new addition?
- React - How to return one of several components in the render function?
- How do I render components with different layouts/elements using react-router-dom v6
- React - How do i force child components to re render when parent state component changes?
- how can I make a scrollable component that scrolls to the latest children components automatically when I append a child component?
- How to avoid rerender all child components which in loop when parent component state update
- How to test children components get proper context from parent's getChildContext()?
- how to render components based on the value of props?
More Query from same tag
- Unit test on redux that involves a firebase call
- Redux persist gives me undefined states instead of default redux states
- Getting a space between header and table with react-bootstrap-table
- Why am I getting a 404 Error when Deploying Google Cloud NodeJS Application?
- Nextjs Listener with callback executes itself
- React Hooks: Cannot assign to read only property
- Hide/Unhide actions icons based on state.vallue value reactjs
- how to override material ui css using css (reactjs)?
- How to have main expandable row for data with children in antd table
- React json list
- how to use chart.js with react Hook?
- React ReferenceError: document is not defined
- How to display a custom YAxis in recharts?
- How to display Metaplex NFT in React using @metaplex/js and programs.metadata.Metadata
- Safari does not render SVG image correctly
- Is good approach to combine Next.js with redux and apollo graphql?
- Short-circuit expressions to dynamically add classes and/or other attributes
- Argument of type 'HTMLCanvasElement | null' is not assignable to parameter of type
- React-Select V2.0 with Next.JS
- React 18: Executing Code When Suspense Completes Promise
- I am trying to change the content of a an html element rendered by React.js using onClick. But this code doesn't seem to work
- How can i display the quantity of the items in my shopping cart on every pages of my react/nextjs application
- Opening a React App through a HTML file's <a href> link
- How to change the line-width of a React Icon?
- Position a rectangle at the rightmost side of the container
- HTML5 video flashes and makes additional requests for the same video
- React test for prop method
- How can I change the color of material-table icons of onRowAdd, onRowUpdate, onRowDelete?
- object.assign is overwriting all objects in my array with duplicate information
- Need to create a card component as many times as I click a button in React