Recoil – State management library for React

Tram Ho

Recoil

When sharing data between component levels in React is difficult, you will think of Redux . However, Redux or other react state management libraries are too complicated or you may not be satisfied. Recoil is another solution.

1. What is Recoil?


Recoil is a library used to manage React ‘s state , besides a series of other bunker libraries such as redux, mobX, flux, … or even React’s own context . Well, seeing too much is confusing, but don’t worry, let me evaluate and compare Recoil with Redux (because this Redux is the most famous).

Redux

  • Advantages:
    • Too famous, too popular.
    • Using global state (that is, the whole app will have a big state).
  • Defect:
    • Because it is a global state and an immutable mechanism, every time there is a small change, the whole global state will be clone, updated changes, replace the old state, then delete the old state ==> There will be application performance issues when your global state is too large and regularly updated.
    • It’s a bit confusing (needs some middleware included).

Recoil

  • Advantages:
    • The syntax is close, easy to use (due to the similar state in React by default).
    • Use individual states (called atoms , distinguished by key ).
    • Support for asynchronous state management (no need for cumbersome middleware like Redux ).
    • Of facebook .
  • Defect:
    • Quite new, few people know and use.
    • Only experimental ==> unstable ==> used in production , you should consider offline.

2. The main API of Recoil


Recoil Root

  • As the biggest guy wrapped outside to be able to use Recoil inside. (Like the React Context Provider or the Redux Provider , but you don’t need to provide a messy store ).
  • There may be multiple root coexisting, and when nested, the innermost guy will work.

Atom

  • It’s like the state in React . This function will return the recoil state to you. And like the react state , when the recoil state changes, the components that are using it will also be changed.

Selector

  • Also return the recoil state too. But the difference with the atom here is that the selector will take the pure function and process the state from the atom to create another transform state (like the selector in React-Redux , which sounds complicated, but goes to the example. understand now).

  • Support asynchronous as well

Hooks

  • useRecoilState : same as React ‘s useState , always get recoil state , return state value along with function to change state value.

  • useRecoilValue : also accepts recoil state , but the difference is that it only returns the state value – used to retrieve the state value.

  • useSetRecoilState : same as the useRecoilState , but only returns the function to change the state value.

  • useResetRecoilState : returns the function to reset the state to the default value.

3. Code Todo-App with Recoil


  • Initialize a React project with create-react-app

  • Go to the newly created project and install Recoil

  • Next, I will create the recoil directory in src , to store recoil states , like this

Directory structure

  • Then, I will create the listState.js file in the recoil folder (as shown above), used to contain the list of todo states.

  • Next, create a new list state to return a list of actions with status new

  • Do the same to create in-progress list and completed list only

  • Now create 3 components: NewList , InProgressList and CompletedList to display the 3 corresponding lists on the screen

  • Adjust App.js to use the 3 newly created components, and with it, wrap the RecoilRoot in because I use Recoil inside.

  • Wow, so the list is now displayed on the screen. Next is to add new actions to this to-do list. The first is to add a set function to newListState to add an action to the list

  • Now create a component for the user to enter action content only

  • Add the NewActionInput to App.js so it can be used

  • Now I will add the function to change the status of each action from new -> in-progress -> completed offline. If you notice, the NewList and InProgressList components already have buttons in it, so next create the set function for inprogressListState and completedListState.

  • Attach the button in the 2 components NewList and InProgressList

  • Doneee, that’s done to-do the app then, adjust the css a bit, you will get the result like this

result

4. Summary


The syntax is simple, close, meets the requirements of a state management library , supports both asynchronous , and there is no problem of scalability anymore. Recoil is pretty good right ?! However, I repeat that it is still experimental , so please consider before including it in production . And what do you think of Recoil ? Do not hesitate to share below the comment , I hope to receive the attention as well as questions and suggestions from everyone. Thank you for taking the time to read this article of mine.

The article has its own opinions and thoughts, aggregated from many online sources.

P / S : If you want to know more and English is ok, go to watch the video of author RecoilDave McCabe always, link here: https://www.youtube.com/watch?v=_ISAA_Jt9kI

Share the news now

Source : Viblo