No he tenido que escribir un patrón de renderProps desde que los componentes/ganchos funcionales se convirtieron en lo que había que hacer, hasta ahora. Al buscar en Google si sigue siendo el enfoque correcto, he leído algunos artículos sobre renderProps que son noticias antiguas y un antipatrón. Las alternativas proporcionadas incluyen ganchos o pasar un nodo JSX.

Sin embargo, tengo un requisito que estos dos no pueden usar. Necesito:

• Use un apoyo pasado desde el componente secundario.
• Utilice un objeto dentro del componente principal que no utilice el elemento secundario.

Se parece un poco a esto:

 const parent = (parentProp) => { const actions = useCallback((childProps) => { return <Button p1={childProps} p2={parentProps} /> }, [parentProp]) return <Child renderActions={actions} /> } const child = (renderActions) => { const [childProp] = useState(1) const actionRenderer = useCallback(() => { return renderActions(childProp) }, [childProp, renderActions) return ( <div>{actionRenderer}</div> ) }

Me preocupa el rendimiento y las re-renderizaciones innecesarias, por lo que usecallbacks debería detener esto.

¿Existe una forma más "moderna" de lograr esta funcionalidad o renderProps sigue siendo viable?