Muy a menudo, cuando se usa un gancho en un componente principal, uno de sus hijos también necesitará usarlo. ¿Es mejor (en cuanto a rendimiento/legibilidad) pasar una función que obtenemos de un gancho a un componente secundario o obtenerla desde cero?
Aquí hay una demostración de lo que quiero decir:
import { useTranslation } from "react-i18next"; // Parent component export default function App() { const { t: formatMessage } = useTranslation(); return ( <div className="App"> <p>{formatMessage("Welcome to React")}</p> <MyButton1 text="Click me!" formatMessage={formatMessage} /> <MyButton2 text="Click me!" /> </div> ); } // Option 1: pass formatMessage as a prop const MyButton1 = ({ text, formatMessage }) => { return <button>{formatMessage(text)}</button>; }; // Option 2: create a new instance of useTranslation const MyButton2 = ({ text }) => { const { t: formatMessage } = useTranslation(); return <button>{formatMessage(text)}</button>; }; Ambos componentes funcionan, pero <MyButton1 /> obtiene la función formatMessage directamente de su padre y <MyButton2 /> crea una nueva instancia. He visto bases de código que usan ambas opciones. ¿Cuál crees que es el mejor?
Si un Child secundario es un elemento secundario directo de un Parent que ha llamado al enlace, y el elemento Child siempre recibirá el accesorio necesario en todos los lugares donde se use, creo que es mejor usar la primera opción, ya que resultará en menos llamadas a funciones. . Depende de lo que haga el enlace, pero puede ahorrar algo de CPU.
Si Child está profundamente anidado, la segunda opción es excelente, ya que de lo contrario dará como resultado lo que se conoce como Prop Drilling . Además, si desea que Child sea completamente independiente de su padre, querrá optar por la segunda opción.