Using React, Recoil atom, selector, and hooks

Image for post
Image for post
Photo by ThisisEngineering on Unsplash

In this article, we are going to look at how we can use Recoil’s atom, selector, and hooks to display and update a list of employees. The employees are either manager or non-manager. We will update the isManager field in the application state and see how only the selected column from the row is re-rendered. We will also derive a count element from the state and see how its UI is re-renderd automatically when the application state is updated.

Recoil documentation for atom states below.

Note: all atom values are frozen. …

We use React so that it can optimally update the DOM for us using it’s magic. But understanding and using React correctly is of great importance as then only we can gain its benefits else we are stuck with performance problem for our application.

In this article we will be going through a scenario where, on update, we will be re-rendering a list of employees using:

  • useCallback — Returns a memoized callback
  • React.memo — React.memo is a higher order component. It’s is used for functions instead of class. By default it will only shallowly compare complex objects in the props object. …


Nikhil Ahir

Passionate developer, eager learner with around 9+ years of professional experience

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store