Jots

Migrate from Redux to React Context and hooks

WHAT

I took an old personal project from a couple of years before.
The project used the library Redux to manage the application state.
I removed this library and introduced instead a pattern of React Context and state hooks.

WHY

I wanted to learn more about React Context.
I was curious to compare the performance before and after the migration.
Also, the gratification to remove a dependency from your project.

WHEN

I did this during a learning period between jobs, over the course of 10 days.

HOW

I approached this migration with some preconceptions:

I started by doing some research to gather people’s thoughts:

At this point I felt skeptical and thought the migration could decrease the app’s quality.
At the same time I was curious to experiment with it.
It sounded like fun and a good learning opportunity no matter the outcome.

So I moved on to making a plan of the current app state, using draw.io.
It didn’t take long given the app size.
This helped me visualise which components used and updated each state.

During this phase I noticed the purpose of some state was unclear at first sight.
So I refactored it, for example using more descriptive and unified naming.

Next I looked at the current state plan and wrote down options for the new one.

By doing that I realised I missed a way to compare the performance of the two solutions.
So I looked into React Dev Tools.
I learnt how to visually highlight what components are rendered at any moment.
I also learnt how to use the Profiler tool to track the reason for a component rendering.

Before starting the migration I wanted to do some preparatory refactoring.
I broke down and reorganised components to isolate logic and limit the re-renderings.
This was a good moment to practice the new React Dev Tools I had learnt.

After the refactoring I went on to the actual migration.
I decided to begin with the parts I perceived as easier and move up towards the trickiest.
Unsurprisingly some easy parts ended up being challenging, and vice versa.

During the whole process I referenced the new React beta documentation.
It includes effective tutorials, suggesting patterns and good practices.

In addition I used Legos to build a model made of components-state-hooks-context.
This helped me internalise the workflow and test different approaches.
It also added a space for creativity and mind-roaming into my work day.
In general this can facilitate problem-solving and elaborating ideas.

Finally, I revisited the preconceptions I had at the beginning of the project.

• Context is like a box to store state
• this is not accurate
• it’s more like a way to ‘teleport’ state that lives inside a parent React component
• Context is used for state shared across the app
• this is true
• although in some cases it can be ok - or even a plus- to just pass down props
• Context causes re-renders in all consumer components
• this is true and you should choose carefully where to place the provider
• having one piece of state for one context can minimise some issues
• I’d use memo sparingly, e.g. in case of a specific action that is inherently expensive
• overall Redux does a great job and migrating will slow down the app
• Redux did a great job for sure the app didn’t slow down with the new pattern of Context and hooks
• there are some glitches which I think can be improved

CONCLUSIONS

Final thoughts about this project are necessarily partial.
This is because the migration was done on a very small app.
I was also in a different place in my learning process as developer when I first made the app.

Using Redux initially was a good choice: it worked well and taught me some new concepts.
It did a lot of things for me out of the box so I didn’t need to ruminate too much.
Doing this migration pushed me to reflect and better understand how React works.
Win-win.

When I’ll start my next React app I’ll choose the Context + hooks pattern.
At what stage of the app would I feel the need for a tool like Redux, if ever?
It will be interesting to grow the application and find out.