This component must be used inside a <RecoilRoot> component


I followed the Quick start tutorial ( I end up getting an error: This component must be used inside a component. (see image below).


It seems that the problem is somewhere in the current-user.js file at this code block:
export function useCurrentUser() {
const currentUser = useRecoilValue($currentUser)

return {
logOut: fcl.unauthenticate,
logIn: fcl.logIn,
signUp: fcl.signUp,

Is anyone able to help?

Hey! Hi!

Did you check that in src/index.js the App component is wrapped by <RecoilRoot> ?

The whole file should look like this:

`// File: ./src/index.js

import "./config"
import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
import reportWebVitals from "./reportWebVitals"
import {RecoilRoot} from "recoil"

     <App />

1 Like