Top React and Redux Packages for Faster Development
React has grown in popularity over the last few years. With that, a lot of tools have emerged that make developer’s life easy and development fun. They are going to help us in achieving the extra productivity that we want. After all, we always want our development tools to
If you are a beginner in React, you may find some of the packages helpful in debugging or visualising various abstract parts of your app.
Let’s begin!
React Storybook
While creating applications in React, you must have had this thought at least once: What if I could see a rendition of the component that I am using(or making) and see how it behaves under different combinations of props, states, and actions. Well, there is a package for this. It’s called Storybook.
React storybook is a visual development environment for React. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. It allows you to quickly prototype components and see changes on every state and prop changes. Here’s a link to their GitHub’s repo.
You should definitely check out their examples page.
Some highlights are —
- Storybook runs outside of your app.
- This allows the components to be developed in isolation from the app development.
- It also means that you do not have to worry about various dependencies while creating the components.
Other similar packages are: React Cosmos, React Styleguidist
React Dev Tools
This is the most famous React development package. It lets you inspect the React component elements and their hierarchy like HTML elements, including component props and state. Also, you can search for a particular components using regular expressions, and see how it affects the rendering of other components using a nifty feature called ‘Highlight Updates’.
It is available as an extension of Google Chrome, and as an add-on for Firefox. It is available as an standalone app too. Installing it is as simple as downloading the extension(or addon). Once installed, there should be a new tab called ‘React’ in Developers Tools(in Chrome).
Tips —
- Highlight Updates: Focus on the colourful lines that are appearing at the bottom of Submit button in the above-mentioned gif. When I type in the input box, the whole component is being re-rendered!
- If causing an action in one place highlight many others, isolated components, it is a cause for concern.
- In most cases, the component is too large and should be refactored into smaller, modular components.
- You can also see the current props and state (email and password) of the component at the right bottom corner. It is a really cool way to see the effect of state changes across the app.
Why did you update?
We spoke about unnecessary rendering in the last segment. It’s not always easy to visually gauge which components are re-rendering needlessly. Thankfully, there is a package for that. It notifies you in the console when potentially unnecessary re-renders occur. It keeps track of the props and states, and when a component is re-rendered without any change in the props or the state, the package logs the details in the console. Make sure to not use this in production. Check it out here.
Create React App(CRA)
Not exactly a development tool, but over the years I have found that this package is really helpful in creating rapid prototypes. Setting up a working React project is really hard. Understand various parts of its structure like Babel and webpack is even harder for a beginner. I wrote a two-part series just to explain that. It’s Yet another Beginner’s Guide to setting up a React Project — Part 1 and Part 2. I explained the need of JSX, Babel and webpack.
Once you understand the basics, you’ll need to repeat the same set of steps every time you create a new project. And, you will need to create multiple project. Hence, to save developer’s time, Facebook created a package that encapsulates the complexity. Try it here.
There’s a high chance that you are using Redux for state management in your React app. Here are some Redux specific tools —
Redux Dev Tools
Like React Dev Tools, but for redux. It is also available as a Chrome Extension, and Firefox addon. Its features are —
- It lets you inspect every state and action payload
- It lets you go back in time by “cancelling” actions. It is also called Time Travel Debugging. There is a great video on this by the creator Redux Dev Tools himself, Dan Abramov. Watch it here.
- If you change the reducer code, each “staged” action will be re-evaluated
- If the reducers throw, you will see during which action this happened, and what the error was.
- The dev tools logging UI (called LogMonitor) can be customised according to your needs. It’s a just another React Component. So it is not that difficult to customise it. Here’s a challenge by Dan Abramov urging you to create your own LogMonitor.
Some other monitors are: Diff Monitor, Inspector, Filterable Log Monitor, Chart Monitor
redux-immutable-state-invariant
Due to constraints put by functional programming style and the way redux behaves, we are never supposed to mutate state. However, it is not readily clear when we are mutating the state and when we are replacing the existing state by a new one.
This redux middleware will ensure that you inadvertently never do that. When the state is mutated, it will throw an error. Check it here.
Tips—
- Make sure that the state does not contain non-serialisable values such as functions. Otherwise, it will throw
RangeError: Maximum call stack size exceeded. - Make sure to not use this package in production as the package involves lot of object copying and is really inefficient.
redux-diff-logger
Chances are that you console.log the state whenever you need to examine it. Or better yet, you use the debugger statement and use dev tools to debug the state. In both cases, you need to see the changed values between the previous state and the current state. Redux diff logger does exactly that. It logs the values that have changed between the states.
What if you need to see the entire state and not just the changed values? Well, you are in luck: Here’s another logger tool by the same author: redux-logger.
I have also written about Top Webpack Plugins for faster development. It lists webpack plugins that simplify our life.
We are always looking for talented, curious people to join the team.
I write about JavaScript, web development, and Computer Science. Follow me for weekly articles.
