Changing parent component state from child using hooks in React can be done (as explained in multiple places as here and here) sharing a callback from parent to child:
function Parent() {
const [value, setValue] = React.useState("");
function handleChange(newValue) {
setValue(newValue);
}
// Pass a callback to Child
return <Child value={value} onChange={handleChange} />;
}
And then you can use the callback in Child:
function Child(props) {
function handleChange(event) {
props.onChange(event.target.value);
}
return <input value={props.value} onChange={handleChange} />
}
The downside of that approach is when you have multiple children. The callback must be passed as argument to all children, and because the callback needs access to setValue has to be declared inside the parent function.
So the callback function will be created every time parent is rendered, and it will force to render all children.
I'm using React memo to avoid this issue, so I can define when a child needs to be rendered again, however I'm wondering if there is a better way to solve this issue.
This is exactly what useCallback was built for!
useCallback will return a memoized version of the callback that only changes if one of the dependencies has changed. This is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders
You could modify your parent component to look like:
function Parent() {
const [value, setValue] = React.useState("");
const handleChange = React.useCallback((newValue) => {
setValue(newValue);
}, []);
// Pass a callback to Child
return <Child value={value} onChange={handleChange} />;
}