Changing parent ponent 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.

Changing parent ponent 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.

• javascript
• reactjs
• react-hooks

• There are multiple cases where you could need the state in parent. For example: reactjs/tutorial/tutorial.html#lifting-state-up – Ignasi Commented Dec 10, 2021 at 11:43
• The example provided is a general one. Not an specific case, it just reflects the general issue. If you check the example provided in my last ment you will see the same issue even with the changes you propose. – Ignasi Commented Dec 10, 2021 at 12:28

1 Answer 1

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 ponents that rely on reference equality to prevent unnecessary renders

You could modify your parent ponent 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} />;
}