Tengo componentes funcionales n React que comparten el 90% de su contenido, pero difieren en algunas funciones que usan.

Digamos que mis componentes son los siguientes:

 export default function BWPage(props) { const f = (x) => x+1 const g = (x) => f(x)*2 const h = (x) => g(x)*x return <div>{h(props.input)}</div> } export default function ColorPage(props) { const f = (x) => x+1 const g = (x) => {props.setColor(f(x)); return 4;} const h = (x) => g(x)*x return <div>{h(props.input)}</div> }

Y así. En la programación OO, obviamente anularía la función requerida y estaría feliz, pero eso no es posible en React. Las pautas oficiales dicen usar composición, pero no veo cómo funciona eso aquí. Pasar todas las funciones que pueden ser diferentes como accesorios no es práctico ya que entonces g no podría llamar a f . Tampoco puedo crear poner todas las funciones comunes en otro lugar e importarlas, ya que entonces h no puede llamar a g . ¿Cuál es la solución adecuada aquí?