So I got my first job and now I'm working with React, and mind you before getting my first dev job I did a 1-year internship, and for the duration of the internship I was strictly using the MEAN stack, for those who don't know what MEAN stack is, It's just different technologies that enable you to build a full stack application and MEAN stands for MongoDB(Database), Express.js(Node framework), Angular(Front-End/User facing), Node.js(enable javascript to run on the server).

So I had no experience with React, and having friends who worked with React I always heard them speak about state management and Redux being hard, so when the time where I had to implement state management on our application I knew Redux was a no-go. The first I googled was "Redux alternatives" and viola came Recoil.js And reading through the documentationI knew "she was the one". Here's a snippet into the world of Recoil:

1yarn add recoil

1
2//You can it state.js/jsx or anything
3import React from 'react';
4import {
5  RecoilRoot,
6  atom,
7  useRecoilState,
8  useRecoilValue,
9} from 'recoil';
10            
11function App() {
12  return (
13    <RecoilRoot>
14    <CharacterCounter />
15    </RecoilRoot>
16  );
17}     
18        

1
2        
3/*
4An atom represents a piece of state. Atoms can be read from and written to from any component. Components that read the value of an atom are implicitly subscribed to that atom, so any atom updates will result in a re-render of all components subscribed to that atom:
5*/
6
7//Using Recoil in a component:
8//Components that need to read from and write to an atom should use useRecoilState() as shown below:
9
10function TextInput() {
11    const [text, setText] = useRecoilState(textState);
12    const onChange = (event) => {
13    setText(event.target.value);
14};
15
16  return (
17    <div>
18      <input type="text" value={text} onChange={onChange} />
19      <br />
20      Echo: {text}
21    </div>
22  );
23}
24        

1
2/* 
3For more indepth explation checkout recoil documentation https://recoiljs.org/docs. Disclaimer: This articles is not sponsored or affiliated with Recoil.js 
4*/
5