React js memo is not working as expected after passing props from parent to children

Question

Lets say I have a component that maintains the state of some children components. This component holds an update function that contains the logic for update the state. I pass the state and the update function to the children component, that are memoized. The thing is the state is not being updated, or the state is cleared after the last change is made.

My question is how to proceed with this memoization, due to the real one has a lot of textfield to update.

In this sandbox I reproduce a minimum example.

Cheers!

Arthur Arakelyan · Accepted Answer · 2022-10-17 16:10:51Z

1

Try to make your update function memorized with useCallback

const update = useCallback((item, value) => { setData((prevState) => ({ ...prevState, [item]: value, })); }, []);

answered Oct 17, 2022 at 16:10

Arthur Arakelyan

1921 silver badge13 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

assembler Over a year ago

Yes, this works, thanks, but what I really need is to memoize the children component. Although you need to pass data into the dependencies array for this callback

Arthur Arakelyan Over a year ago

It is possible only with useCallback, because when the children component doesn't take functions as props. Functions are updating after every re-render

Arthur Arakelyan Over a year ago

@assembler these links might be helpful for you. dmitripavlutin.com/use-react-memo-wisely stackoverflow.com/questions/63123846/…

Arthur Arakelyan Over a year ago

with prevState there is no need to pass data as an argument for callback

assembler Over a year ago

You know what, your response works charmingly

|

Collectives™ on Stack Overflow

React js memo is not working as expected after passing props from parent to children

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related