Entonces, un compañero de trabajo y yo estábamos discutiendo la mejor manera de escribir componentes de React, teniendo en cuenta: legibilidad, tiempo de desarrollo, rendimiento.

Supongamos que tenemos un componente de tamaño medio: es decir, 400 líneas. Propuse hacer algo como esto:

Estructura de carpetas

 MyComponent ├── MyComponent.js ├── MyComponentView.js ├── myComponent.scss ├── SubComponent1.js ├── SubComponent2.js ├── utils.js

MiComponente.js

 const MyComponent = ({ something }) => { const [state, setState] = useState({ something.data }); const doSomethingHandler = () => { /* here would be some code */ } const focusSendButtonHandler = () => { /* here would be some code */ } const blurSendButtonHandler = () => { /* here would be some code */ } const applyAllButtonHandler = () => { /* here would be some code */ } const saveDataHandler = () => { /* here would be some code */ } return <MyComponentView {...{ someProps }} /> }

Algunos controladores usan funciones que están definidas en la carpeta utils, que consideré apropiado extraer porque pueden usarse para otra cosa más adelante.

SubComponent1 y SubComponent2 son componentes tontos que solo representan cosas.

Ahora, su idea era también mover todos los controladores al archivo utils, o al menos fuera del componente, en caso de que haya algún código que pueda reutilizarse.

En mi opinión, no hay código que se pueda reutilizar en los controladores porque todo es realmente específico del componente.

La mayoría de los controladores cambian el estado del componente.

Asi que aqui están mis preguntas:

1. ¿Es una buena práctica mover los controladores fuera del componente en caso de que puedan usarse más tarde en otra parte del código?

2. ¿Hay algún problema de rendimiento al sacarlos del componente?

3. ¿Hay algún beneficio en extraer la funcionalidad principal de un controlador a otra función, PERO dejar el controlador que llama a esta función dentro del componente?

4. ¿Debo envolver los controladores en un useCallback ? Todos ellos se pasan a MyComponentView SubComponent1 o SubComponent2 .