Best approaches to build powerful react+redux applications

Due to the deluge of tools and libraries available today, it is quite easy to get confused about when to use React or a combination of React+Redux in building web applications. That is the exact premise of this blog, to clear the clutter surrounding React-Redux and provide you with the best approaches to build powerful applications with them.

React is a JavaScript library that is used to build user interfaces. Web or mobile applications built using React consists of a number of components. These components combine together to build a larger application. The advantage of components is that a specific component can be dynamically changed, without affecting the application as a whole. Whenever data is added or updated to the application, React immediately updates the specific component whose state has actually changed.

Data management is only one aspect of a React application. React applications require the use of more libraries for state management, API management, etc. Redux is one such open-source library that is used to manage the state of an application. Although it is mostly used with React, it can be used with any other JavaScript framework or library.

If you are planning to use React and Redux together, it is better to use React-Redux, as it is the official Redux UI binding library for React.

Component reuse and optimization with React-Redux

It is possible to write big React components, which are capable of managing a multitude of different tasks, however, it is better to divide the components on the basis of responsibility. This drives the practice of creating and implementing robust React architecture. On the basis of divided responsibilities, React has container components and presentational components – the former collects and manages data and the latter displays relevant information in the UI, based on the data received.

Container components are stateful and presentational components are stateless and are written as functional components, unless they require state and lifecycle hooks. The flow chart below illustrates how container and presentational components interact with the Redux store:

Note:

It is easy to test a component if it is written as simple as possible by splitting presentational components and container components.
Previously, React had stateless and stateful functional components. After the introduction of React hooks, the use of State Hooks has made it possible to add state to functional components. So, it’s up to you to decide between functional components and class-based components, based on the requirement.

Use React.memo()

In the DOM updation process, React starts by rendering the component and then checks for any similarity with the prior render. If the two render results are dissimilar, React updates the DOM. The render comparison process is quick, but it can be made faster with ‘React.memo()’.

With ‘React.memo()’, React renders the component and commits the result to memory. If the props of the current render and the previous render are the same, React reuses the memorized result. The following example demonstrates how this can be done:

Use bindActionCreators to dispatch actions

Dispatch action is a way to change the state in Redux. Typically, dispatch is directly called on the Redux store instance. As an alternative, the Redux utility ‘bindActionCreators’ can be used to send action creators to a component that is not familiar with Redux. In React-Redus, often this is used with the connect() function, as part of the mapDispatchToProps parameter.

In the above code, ‘filterTalentPoolDataBySkills’ in ‘bindActionCreators’ is available as ‘props.filterTalentPoolDataBySkills’ to dispatch the action. It will make it easier to maintain the code in the long run.

Try to avoid using setState and component lifecycle hooks when using Redux:

Manage the application state using the Redux store, when it is in the global state. Try to avoid using ‘setState’ in your component, when using state management libraries like Redux. Use the component state when it makes sense. For example, to have a mouse over tooltip in a button component, do not use Redux. Read More

Labels: