Se puede cambiar el estado del componente principal del elemento secundario usando ganchos en React (como se explica en varios lugares como here y here ) compartiendo una devolución de llamada de elemento principal a elemento secundario:
function Parent() { const [value, setValue] = React.useState(""); function handleChange(newValue) { setValue(newValue); } // Pass a callback to Child return <Child value={value} onChange={handleChange} />; }Y luego puedes usar la devolución de llamada en Child:
function Child(props) { function handleChange(event) { props.onChange(event.target.value); } return <input value={props.value} onChange={handleChange} /> }La desventaja de ese enfoque es cuando tienes varios hijos. La devolución de llamada debe pasarse como argumento a todos los elementos secundarios y, debido a que la devolución de llamada necesita acceso a setValue , debe declararse dentro de la función principal.
Por lo tanto, la función de devolución de llamada se creará cada vez que se procese el padre, y obligará a representar a todos los hijos.
Estoy usando React memo para evitar este problema, por lo que puedo definir cuándo un niño debe volver a renderizarse, sin embargo, me pregunto si hay una mejor manera de resolver este problema.
¡Esto es exactamente para lo que se creó useCallback !
useCallback devolverá una versión memorizada de la devolución de llamada que solo cambia si una de las dependencias ha cambiado. Esto es útil cuando se pasan devoluciones de llamada a componentes secundarios optimizados que se basan en la igualdad de referencia para evitar representaciones innecesarias.
Podría modificar su componente principal para que se vea así:
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} />; }