So a coworker and I were discussing the best way to write React components, taking into account: readability, developing time, performance.

Suppose we have a medium size component: i.e: 400 lines. I proposed doing something like this:

Folder structure

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

MyComponent.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 }} />
}

Some handlers use functions that are defined in the utils folder, that I deemed appropriate to extract because they may be used for another thing later.

SubComponent1 and SubComponent2 are dumb components that only render stuff.

Now, his idea was to also move all the handlers to the utils file, or at least outside from the component, in case there is some code that can be reused.

In my opinion, there's no code that can be reused in the handlers because it's all really specific to the component.

Most of the handlers change the state of the component.

So here are my questions:

1. Is it good practice to move the handlers outside the component in case they might be used later in another part of the code?

2. Is there a performance issue with taking them outside the component?

3. Is there a benefit to extract the main functionality of a handler to another function, BUT leaving the handler that calls this function inside the component?

4. Should I wrap the handlers in a useCallback? All of them are being passed down to MyComponentView SubComponent1 or SubComponent2.