score:2

Accepted answer

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 function shouldcomponentupdate (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.

dom update

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


Related Query

More Query from same tag