Getting Started With Recoil

Lets Get Started!

npm install recoil
yard add recoil
import on line 6. RecoilRoot wrapped around <App /> line 10–12

Setting up your Atom file

i named my file Atoms.js
more Atoms

Accessing the atoms

// importing hooks from recoilimport { useSetRecoilState, useRecoilState, useRecoilValue } from "recoil"// importing atoms from Atoms file. I had mine in a folder called Atoms and the name of the file was Atoms.jsimport { userAtom } from "./Atoms/Atoms"
// useState vs useRecoilState
const [user, setUser] = useState({}); // useStateconst [user, setUser] = useRecoilState(userAtom); // useRecoilState// they are almost the same! the default value for useState is set inside (). the default value for useRecoilState is our userAtom that we imported.
// for example, if were in another component somewhere in the app and needed to know who the user was, we can import the userAtom and import the useRecoilValue hook from recoil.import { userAtom } from "./Atoms/Atoms"
import { useRecoilValue } from "recoil"
function ComponentName(){

const user = useRecoilValue(userAtom);
return ( <div>Hi {user.name}! // assuming the userAtom object has a name key value pair. )}
const setUser = setRecoilState(userAtom)

--

--

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