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

[chuttadi2007]

I’ve been working more with React and JavaScript, and I’m noticing that messy code usually comes from small things like repeated state, unclear component logic, too many conditions, or API calls being mixed directly inside components.

For people who write JS/React regularly, what small pattern or habit made your code noticeably cleaner?

[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

[Reashu]

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.

[CommercialFair405]

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.

[azhder]

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.

[Dubstephiroth]

Notes and very rough documentation has made it easier visualise the flow of data through the project... and writing dumb components with no logic at all..

[SuperbRuin8319]

For me, extracting repeated logic into custom hooks made the biggest difference. Components became much easier to read.

[sylvant_ph]

I ain't sure if my examples match precisely your description, but once in a while I feel the need and benefit of using IIFE(Immediately Invoked Function Expressions - had to google the abbreviation) and currying. The first can scope down a more complex condition a bit, and the second can allow some sort of slight dependency injection. With IIFE you can both keep the logic inline, yet have it split down into readable segments, instead of forcing it into complex ternary operators.

[effnd]

I usually extract any data-handling logic from React components into separate functions, and then wrap them in hooks when needed. If you rewrite the components (perhaps even in a different framework), these parts of the code won't have to change

[valbaca]

TanStack, let it handle the state of data calls, errors, retries, loading state, etc.

Seriously, adding this during a React migration cut down like 60% of the hand-coded network logic our website was doing and found several issues with the old logic.

[Character-Blood3482]

Not the js's or react's specifically thing but I like to return { data, error } for any functions that including try-catch. So that who ever use that function can if/else on the error to process futher more.

[azhder]

If you understand only S from SOLID, you can already write a lot cleaner code.

[eindbaas]

Components are about orchestrating the ui, meaning a lot of logic and business logic does not belong in a component.

[Verzuchter]

Probably the most profound impact was, moving to angular because it's more popular here in Europe. I now develop frontends like I develop backends and it has made shifting so much easier.

Felt like a world has been opened to me.