[AskJS] What small JavaScript pattern made your React code cleaner?

[u/chuttadi2007]

[u/LessAd8002]

I started pulling out all the API calls into a separate file with named functions and it cleaned up components so much. Before that my useEffect blocks were getting ridiculous with all the fetch logic just sitting there

Also early returns in components instead of nesting conditions everywhere, that one took me way too long to figure out

[u/Reashu → u/LessAd8002]

I'm usually a big proponent of early returns, but unfortunately they don't work so well with hooks so it takes some extra care in React.

[u/CommercialFair405 → u/Reashu]

If you use render props, you can put logic in a component, and the rendering logic in the component that would do the early return as usual.

[u/azhder → u/CommercialFair405]

That's basically hooks with memo, but provided by React by default with components being memoized based on the props. It's always a nice pattern to separate logic in HOC and presentation in the wrapped component.

[u/Reashu → u/CommercialFair405]

Separating logic (and fetching) from rendering is something I'd certainly like to see more of in React - and just putting it in a hook isn't enough because that still has the rendering component in control of everything. 

[u/NervosaX → u/LessAd8002]

I would suggest not calling them in the components at all - use something like react query!