Colocating Side Effects With Actions Using useReducer
The word colocation gets thrown around a lot these days.
*Styles* in my mind being the biggest example There seems to be a near constant conversation revolving around *colocating* styles with components, the argument often being that styles are **part** of the component and without them it would not be what it is. Putting the two together allows one to reason in a single place about what will appear on the page.
I won’t get into that here because I wish to spend most of my time *not* arguing about styles on twitter.
What I’ll talk about instead is React hooks, I believe they have introduced a place where we have an astonishing chance for colocation in data fetching and data flow in general.
I didn’t randomly choose to put bread and cheese emojis in the header image because those just so happened to be the two things currently on my mind, I see them as a great example of things that are commonly *colocated* in this real world everyone keeps telling me about (but I don’t get MTV I respond to rapturous laughter).
As hooks gain more and more popularity, specifically **useReducer** we often begin to see it paired with **useEffect** in many different sorts of ad hoc ways in fetching data. Something like this contrived example below:
This code, barring mistakes I almost definitely made, should work, but the thought of slogging through this every time I’m doing something like loading an avatar is a nightmare. But I still love the **useReducer** pattern so whatttttt am I to do.
I believe **ReasonReact** has already solved for this with the reducerComponent
**ReasonReact** provides the functions *Update*, *UpdateWithSideEffect*, *SideEffect*, and *NoUpdate* which are than used to wrap the value returned from the reducer allowing not so much the colocating of side effects with the reducer (which we still want to keep pure) but the colocation of the **INTENT** of side effects that will follow.
We can take this idea and bring it over to the world of React hooks to give us a somewhat similar experience, remove excessive code like that seen above, and provide a common pattern for teams to execute actions that lead to side effects. Hopefully causing easier understanding of the code, easier to review pull requests, and the actual important reason, less bugs reaching the end user.
Here’s what the above code might look like in that world.
We can take this idea and bring it over to the world of React hooks to give us a somewhat similar experience, remove code like that seen above, and provide a common pattern for teams to execute actions that lead to side effects leading to easier understanding of the code and easier to review pull requests.
Here’s what the above might look like in that world.
We’re now able to colocate the fetching of the avatar with our declaration of intent to fetch the avatar, allowing us to follow in one section of code exactly what is happening.
I believe **ReasonReact** got this **super duper extremely correct** and am excited to use this pattern with React hooks as I develop new features.
You can see a library implementing this pattern here and to be honest it’s not all that difficult to do this or something similar on your own.
If you’re interested in hearing more on the topic and are the SF Bay Area I’ll be speaking on the topic at the July React Meetup
Looking forward to hearing what everyone thinks!
