Do React Hooks Replace Higher Order Components (HOCs)?
馃敟 Render Props 馃敟 Suben el nivel de elegancia y bajan el c贸digo aburrido a comparaci贸n de los custom hooks, pero se puede volver algo saludable para los componentes m谩s estructurales de nuestras aplicaciones en caso de practicar bastante esta t茅cnica.
Que pasa si tenemos muchos lugares de donde se consume la informaci贸n
Render Functions
<Componente1>
{props1 => (
<Componente2>
{props2 => (
<Componente3>
{props3 => (
{/* ... */}
)}
</Componente3>
)}
</Componente2>
)}
</Componente1>
HOC
const TodoBoxWithEverything = withApi(
withSomething1(
withSomething2(
withSomething3(
withSomething4(
withSomething5(
TodoBox
)
)
)
)
)
);
Hooks
const [whatever1, setWhatever1] = useState();
const [whatever2, setWhatever2] = useState();
const [whatever3, setWhatever3] = useState();
const [whatever4, setWhatever4] = useState();
const [whatever5, setWhatever5] = useState();
return (
<Componente {...todosLosWhatevers} />
);
馃敟 Hooks 馃敟
Pero en segundo lugar queda HOC debido a que se puede mejorar la legibilidad con la funci贸n compose
const TodoBoxWithEverything = compose(
withApi,
withSomething1,
withSomething2,
withSomething3,
withSomething4,
withSomething5,
)(TodoBox);