Tengo dos componentes, tales que son:
const ChildOn = (/*...*/) => { //... } const Parent = () => { const [is42, setIs42] = useState(true) return (is42 ? <ChildOff ... > : <ChildOn ... />) } La definición de ChildOff no es importante.
Quiero definirlos como cualquiera de los siguientes, pero no puedo decidir cuál:
Declara funciones usadas en hijos, basadas en una variable/función en el padre, dentro de cada hijo.
type ChildOnProp = { setIs42: Dispatch<SetStateAction<boolean>> }; const ChildOn = ({ setIs42 }: ChildOnProp) => { const f1 = () => { setIs42(true); }; return <Text onPress={f1} />; }; const Parent = () => { return is42 ? <ChildOff setIs42={setIs42} /> : <ChildOn setIs42={setIs42} />; };Define las funciones utilizadas por los hijos, dentro del padre.
type ChildOnProps = { func: () => void } const ChildOn = ({ func }: ChildOnProps) => { return <Text onPress={func} /> } const Parent = () => { const [is42, setIs42] = useState(true) const f1 = useCallback(() => { setIs42(true) }) const f2 = useCallback(() => { setIs42(false) }) return (is42 ? <ChildOff func={f2} /> : <ChildOn func={f1} />) } Mientras que (1) es mucho más bonito para mí, (2) parece mucho más eficiente. Sin embargo, no sé si puedo juzgar eso, ya que he leído muchos artículos sobre React que se contradicen entre sí sobre cuándo es mejor usar useCallback .
La comunidad de React advierte contra la memorización inútil, ya que podría agregar complejidad sin ninguno de los beneficios en algunas situaciones.
En este caso, creo que vale la pena memorizar las devoluciones de llamada, ya que reducirá la cantidad de renderizaciones innecesarias de los componentes secundarios, que de otro modo podrían tener un impacto negativo o incluso presentar problemas con el tiempo.
Para hacer esto, existe un patrón común de creación de un gancho personalizado, a menudo llamado useToggle , que memoriza setters comunes.
import {useState, useMemo} from 'react'; export function useToggle(initialValue = false) { const [value, setValue] = useState(initialValue); // Defined once, so guaranteed stability const setters = useMemo(() => ({ toggle: () => setValue(v => !v), setFalse: () => setValue(false), setTrue: () => setValue(true), setValue, }), [setValue]); // Defined each time the value changes, so less than every render. return useMemo(() => ({ ...setters, value }), [value, setters]); }Esto se puede usar en el padre como tal:
const Parent = () => { const { value: is42, setTrue, setFalse } = useToggle(true); return (is42 ? <ChildOff func={setFalse}> : <ChildOn func={setTrue} />); }TypeScript deducirá todos los tipos automáticamente, por lo que funciona de inmediato.
Si hay varios valores de estado que necesitan una devolución de llamada alterna, podemos identificar fácilmente cada uno sin desestructurarlos.
const firstState = useToggle(true); const secondState = useToggle(true); //... return ( <> <Foo onClick={firstState.toggle} /> <Bar onClick={secondState.toggle} /> </> );Como referencia, aquí hay una implementación más simple de Shopify . En cuanto a memorizar demasiado o muy poco, Meta (Facebook) aparentemente está experimentando memorizando todo de forma predeterminada en el momento de la transpilación, para que los desarrolladores no tengan que pensar en ello.