Tengo un componente que consta de varios otros componentes, como campos de texto, y cuando se realiza una entrada en el campo de texto, todos los demás componentes se vuelven a representar. Me gustaría evitar que se vuelva a renderizar y solo volver a renderizar el componente que realmente cambia. He visto que "useCallback" es la forma correcta de hacer esto y ya he visto cómo usarlo. Sin embargo, tengo algunos problemas para que "useCallBack" funcione correctamente en mi caso. Incluso si lo configuro de una manera simple como se muestra a continuación, cada nuevo carácter ingresado en el campo de texto hace que el botón se reproduzca nuevamente. no veo mi error
Ver ejemplo de trabajo en sandbox.
const Button = () => { console.log("Button Rendered!"); window.alert("Button Rendered"); return <button onClick="">Press me</button>; }; export default function App() { const [textInput, setTextInput] = useState("Hallo"); const onChangeInput = useCallback( (e) => { setTextInput(e.target.value); }, [textInput] ); return ( <div> <input type="text" onChange={onChangeInput} value={textInput} /> <Button /> </div> ); }Estoy feliz por cualquier calrification.
useCallback no evita las reproducciones. React.memo es lo que evita los renderizados. Hace una comparación superficial de los accesorios anteriores con los accesorios nuevos y, si son iguales, omite el renderizado:
const Button = React.memo(() => { console.log("Button Rendered!"); window.alert("Button Rendered"); return <button onClick="">Press me</button>; });El único papel que juega useCallback en esto es que a veces desea pasar una función como accesorio a un componente memorizado. Para que la memorización funcione, los accesorios no deben cambiar, y useCallback puede ayudar a que los accesorios no cambien.
cambiar el estado hace que se vuelva a renderizar el componente junto con todos sus herederos, para evitar que se vuelvan a renderizar algunas secciones, puede usar useMemo para evitar que se vuelvan a renderizar no deseados...
NOTA: useMemo tiene algunos costos... así que no lo use en exceso ( en este pequeño ejemplo, no se recomienda en absoluto ).
en este caso, si no necesita volver a renderizar, puede usar useRef para guardar la referencia de entrada para obtener ese valor cuando lo necesite.
p.ej:
const BlahBlah = () => { const inputRef = React.useRef(undefined); return ( <div> <input ref={inputRef} /> <button onClick={() => console.log(inputRef.current.value)} </div> ); };Personalmente, evitaría React.memo / React.useRef / React.useCallback .
La solución más simple para su ejemplo es simplemente crear otro componente y almacenar el estado con esto.
p.ej.
const Button = () => { console.log("Button Rendered!"); window.alert("Button Rendered"); return <button onClick="">Press me</button>; }; const TextInput = () => { const [textInput, setTextInput] = useState("Hallo"); const onChangeInput = useCallback( (e) => { setTextInput(e.target.value); }, [textInput] ); return ( <input type="text" onChange={onChangeInput} value={textInput} /> ); } export default function App() { return ( <div> <TextInput/> <Button /> </div> ); }En lo anterior, si cambia el texto, no hay cambio de estado en la aplicación, por lo que el botón no se vuelve a procesar, no es necesario usar Memo, etc.
Descubrirá que React funciona realmente bien, cuanto más divida sus componentes, no solo resuelve los problemas de volver a renderizar, sino que potencialmente hace que sea mucho más fácil reutilizar los componentes más adelante.
IOW: mantenga el estado lo más cerca posible del componente y seguirá el rendimiento.
Por supuesto, su ejemplo es simple, y en una aplicación real tendrá que lidiar con HOC, etc., pero esa es otra pregunta ... :)
Lo estoy usando de esta manera:
const [state_data, set_state_data] = useState([ true, // loading. {}, // vehicle. {} // user. ]);Esto permite renderizar solo 1x en lugar de 3x y React realiza un seguimiento de los cambios. Por alguna razón, no rastreará el cambio de objetos, pero las matrices sí.