Tengo un enlace personalizado que tiene un montón de valores y funciones relacionados que devuelve un componente que requiere esos valores y funciones. Actualmente lo tengo en un solo gancho porque es mucho más limpio que la alternativa.

He colocado números aleatorios para ilustración.

OPCIÓN 1: el gancho limpiador único actualmente preferido que devuelve componentes

 const customHook = ({ dep1, dep2, ...deps}) => { // a bunch of related stuff return { val1, ..., val9, func1, ..., func5, component1: val3 && <Component1 val1={val1} ..... val6={val6} />, component2: val5 && <Component2 val1={val1} ..... val6={val6} func1={func1} ... func={func5}/> } } // component const MyComponent = () => { const { ...vals, component1, component2 }= cusotmHook({ ...deps}) return ( <Stuff> {component1} {component2} </Stuff> ) }

OPCIÓN 2: alternativa para usar gancho y crear componentes por separado

 import customHook from './customHook' import {Component1, Component2} from './Components' const MyComponent = () => { const { vals.... } = customHook({ ...deps }) return ( <Stuff> <Component1 {...listOfValuesFromHook} /> <Component2 {...listOfValuesFromHook} /> </Stuff> ) }

Considero que la opción 2 es más engorrosa (obviamente simplificada para nuestra situación), ¿es esto demasiado antipatrón? ¿Hay una mejor manera de mantenerlo limpio sin tener que pasar una gran matriz de accesorios al componente 1, 2, etc.?