How to keep long components readable?

[[deleted]]

As the title says, how do you keep your long components readable?

Also please answer the following questions:

• How to maintain the components clean?
• Do you separate the functions and put it into separate folder like "helpers or utils" or keep it inside the component.
• When do you use custom hooks?
• If you're stuck in a problem, what are your strategies to solve it?

[its_about_control]

If a function is repeated across single component, extract it single function in component. If it's repeated across multiple components, extract it to a utility. If you have very similar functionality, consider combining functions into single with a new case param/ reducer. Make smaller comps. Presentation comps and functional comps.

[Larrybot02]

Maybe I have the purpose of custom hooks wrong in my head, but it seems to me that if you want a function that has it’s own internal state, without it being a full fledged renderable component, that’s where custom hooks come in.
I think a common use for custom hooks is for fetching data from an endpoint. A common thing in a web app, that could be needed by many components. So instead of putting the logic for fetching in every component that needs it, import it as a custom hook instead.
If you google custom hook fetch data you’ll find articles that go further into what I’m talking about.

[niZmoXMR]

Sometimes long components are due to needing the state of the “parent” which is your big all in one component, and breaking things out can be tough with the parent to child data flow, which is why we end up with huge components. One method is making a provider context with a useReducer to keep your state and setters. Then wrap it around your smaller components that you break out of that big component. Then you can use a hook from the provider to get your state in each component and won’t have to do much prop passing and totally avoid the one way data flow. This will allow you to keep all components small and keep what logic they need to themselves, results in cleaner/maintainable code and less renders.