Stack Overflow
Stack Overflow

Questions tagged [recoiljs]

A state management library for React.

Recoil is a minimal library that provides an experimental set of utilities for state management with React.

  • Minimal and Reactish: Recoil works and thinks like React. Add some to your app and get fast and flexible shared state.
  • Data-Flow Graph: Derived data and asynchronous queries are tamed with pure functions and efficient subscriptions.
  • Cross-App Observation: Implement persistence, routing, time-travel debugging, or undo by observing all state changes across your app, without impairing code-splitting.

Recoil lets you create a data-flow graph that flows from atoms (shared state) through selectors (pure functions) and down into your React components. Atoms are units of state that components can subscribe to. Selectors transform this state either synchronously or asynchronously.

Useful links

Related tags

Reference

268 questions
4
votes
3 answers

nextjs react recoil persist values in local storage: initial page load in wrong state

I have the following code, const Layout: React.FC = ({ children }) => { const darkMode = useRecoilValue(darkModeAtom) console.log('darkMode: ', darkMode) return (
Pranta
  • 2,928
  • 7
  • 24
  • 37
4
votes
0 answers

Material UI - Autocomplete with React Hook Form

I am building a form using Material UI's Autocomplete feature and using recoil for state management. I am also using react-hook-form. I am needing the following criteria met: Need typeahead that allows first letter typed to return a list of options…
npabs18
  • 167
  • 2
  • 10
4
votes
2 answers

There is a way to update states on recoilJS outside of component?

So I'm trying recoilJS for a js game that I am building and it pretty neat, but the need to update atoms from components only feels like a limitation. To create a game loop, I put all the logic on empty component so I will be able to read and write…
Smiled_One
  • 445
  • 1
  • 4
  • 17
4
votes
5 answers

How to integrate recoil library with react-native?

I'm trying the new state management library from facebook recoil, I tried the Getting started example on a reactjs project and it worked perfectly. After that I tried recoil on a react-native project but I got an error: Here's the code I've…
Mahdi N
  • 2,128
  • 3
  • 17
  • 38
3
votes
0 answers

How to mock recoil selector / atom with jest

I have a basic react component using recoil, like: import { useRecoilValue } from 'recoil' import { isAuthenticated } from 'authentication' export function CreateMenu() { const auth = useRecoilValue(isAuthenticated) return (
{auth…
TBowmo
  • 75
  • 1
  • 11
3
votes
2 answers

React recoil, overlay with callback and try finally

I want to render overlay on the long running operations. Consider I have the following code let spinnerState = useRecoilValue(overlayState); return } spinning={spinnerState.shown}…
JaktensTid
  • 272
  • 2
  • 5
  • 20
3
votes
2 answers

ReactJS error is "This component must be used inside a component."

But I'm twisting it slightly, where I don't have a layout but rather a per page component that I'd like to add to the header. I am getting the following error: Account.jsx looks something like this: import { useRecoilValue } from "recoil"; import {…
Aniw Anie
  • 79
  • 1
  • 6
3
votes
2 answers

Recoil: Set value in Atom after calling api call in Selector

I want to set value in atom after calling API in selector because I have to add params to call API. Atom export const downloadData = atom({ key: 'downloadData', default: [], }); SelectorFamily export const downloadDataResultsQuery =…
Pytan
  • 1,138
  • 11
  • 28
3
votes
1 answer

Recoil Atom and Typescript, define type and pass atom as parameter

I start to use recoils and typescript. At this time, I use the default property to define each properties type of my atom : const WipStateAtom = atom({ key: 'wipAtom', default: { data: null as IData | null, ex: null as IEx |…
jquintard
  • 35
  • 4
3
votes
1 answer

How to deal with useEffect warning when using Recoil?

I've followed the Recoil docs to create the attached which works but with the following warning Warning: Can't perform a React state update on a component that hasn't mounted yet. This indicates that you have a side-effect in your render function…
steven
  • 51
  • 3
3
votes
0 answers

Getting a "There are no focusable elements inside the " error inside next.js app

I am trying to run this code but getting this error, I want to create a button that opens a headless UI. I have tried to add the ref and initialFocus but it did not help, I have also tried to copy the code from the headless UI modal example and put…
spongebobkabaap
  • 43
  • 4
3
votes
2 answers

Dynamic atom keys in Recoil

I'm trying to make a dynamic form where the form input fields is rendered from data returned by an API. Since atom needs to have a unique key, I tried wrapping it inside a function, but every time I update the field value or the component re-mounts…
Dac0d3r
  • 2,176
  • 6
  • 40
  • 76
3
votes
1 answer

Update Recoil state from async function

I've got an application which performs API actions when buttons are hit. When the action is ended I update a Recoil state. But the thing is when I try to update the state I replace the old one with the new updated one, and in an async context I…
Antoine
  • 472
  • 2
  • 11
  • 21
3
votes
0 answers

How to make state only available on server side in Nextjs?

I'm building an ecommerce shop in Nextjs and (headless) Shopify. I want all my pages to be statically generated. For that I use getStaticProps & getStaticPaths (of course) where I mainly fetch product data from the Shopify API. I'm having a lot of…
L. Heider
  • 1,579
  • 1
  • 14
  • 31
3
votes
0 answers

What is the canonical way to use Recoil with React to create an efficient Master Details UI

I am using Recoil for my React project and mostly loving it. I'm familiar with the concepts of atoms, atom families, selectors and selector families. However, I'm struggling to work out how to compose these items together to create a canonical…
ConfusedNoob
  • 9,826
  • 14
  • 64
  • 85
1
2
3
…
17 18