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
22
votes
1 answer

What are the conceptual differences between Zustand and Recoil performance

I've been looking into Zustand and Recoil -- two state management libraries that are relatively new. Recoil is heavily advertised as being "very performant" for React apps with deeply-nested structures. However, I don't see how (or how exactly) it…
YSK
  • 528
  • 4
  • 7
17
votes
4 answers

How to get all elements from an atomFamily in recoil?

Im playing around with recoil for the first time and cant figure out how I can read all elements from an atomFamily. Let's say I have an app where a user can add meals: export const meals = atomFamily({ key: "meals", default: {} }); And I can…
DannyMoshe
  • 6,023
  • 4
  • 31
  • 53
16
votes
3 answers

Cannot assign to read only property 'current' in React useRef

i used react useRef in functional components to get link on html object and store it in Recoil atom. For example: const Children = () => { const [refLink, setSrefLink] = useRecoilState(refLink) return } const Parent = ()…
dendroid
  • 181
  • 1
  • 1
  • 7
14
votes
3 answers

How to update atoms (state) in Recoil.js outside components ? (React)

I'm new to Recoil.js, I have the following atom and selector for the signed-in user in the app: const signedInUserAtom = atom({ key: 'signedInUserAtom', default: null }) export const signedInUserSelector =…
Two Horses
  • 1,401
  • 3
  • 14
  • 35
13
votes
2 answers

recoil: Duplicate atom key - in nextjs

I do use recoil in my nextjs application. But if I run next (in dev or production make no difference) I got this error-message: Duplicate atom key "companyData". This is a FATAL ERROR in production. But it is safe to ignore this warning if it…
suther
  • 12,600
  • 4
  • 62
  • 99
9
votes
3 answers

Recoil not persisting state, when refreshing page

I have some state with React recoil, but whenever the page is manually refreshed, the recoil state is reset. Is this normal behaviour, because i know other state management libraries like flux and react-redux will do this. Is it best practise to…
Kristoffer Tølbøll
  • 3,157
  • 5
  • 34
  • 69
8
votes
3 answers

How do I set the result of an API call as the default value for a Recoil atom?

I'm trying to set the default value for an atom in RecoilJS as the value of an asynchronous API call. I'm doing this so that when a certain React component renders it will have all of the current sets in the database without having to call…
jackpalaia
  • 81
  • 1
  • 3
7
votes
2 answers

Can the default value of a Recoil atom be an object?

Can I set the default value of a Recoil atom to be an object? e.g.: export const currentUserState = atom({ key: 'currentUserState', default: { name: '', email: '', userId: null }, }); And then set it with: import { currentUserState } from…
Kirk Ross
  • 6,413
  • 13
  • 61
  • 104
7
votes
1 answer

How would one structure deep nested state tree with RecoilJS?

How would one structure deep nested state tree with RecoilJS? Should I have every branch as separate atom or something?
jayarjo
  • 16,124
  • 24
  • 94
  • 138
7
votes
3 answers

Using recoil.js in react, in class component without using hooks

I am new to recoil, and I am using all class components. Here is my recoil state export const tokenState = atom({ key: "tokenState", default: "", }); How to use recoil in class component and set the token? I have used RecoilRoot in app…
Bikram Nath
  • 483
  • 6
  • 15
6
votes
1 answer

What is the use case of atomFamily in recoil?

I did my first experiment with recoil, building an editable table. Each cell has an atom which stores its row, column, and text value. The way I built this was by initializing each cell's atom into a dictionary (just a plain object), with keys in a…
Pablo Barría Urenda
  • 5,703
  • 5
  • 20
  • 32
6
votes
1 answer

Recoil State is not updating properly

I have the following code. const [verificationValues, setValues] = useRecoilState(verificationFormValues); setValues({ ...verificationValues!, nidOrPassport, addressProof, recentPhoto, bankAccountStateMents, businessProof, …
Pranta
  • 2,928
  • 7
  • 24
  • 37
4
votes
1 answer

Can I change other pieces of state in a Recoil Atom Effect

The Situation I am using Recoil to manage state in a React application. I am using Atom Effects to back up recoil values with an API. When my Atom detects something wrong with the authentication token I would like it to somehow convey that issue to…
slifty
  • 13,062
  • 13
  • 71
  • 109
4
votes
1 answer

Best way to use useMemo/React.memo for an array of objects to prevent rerender after edit one of it?

I'm struggling with s performance issue with my React application. For example, I have a list of cards which you can add a like like facebook. Everything, all list is rerendering once one of the child is updated so here I'm trying to make use of…
gwrik09
  • 121
  • 1
  • 2
  • 9
4
votes
1 answer

What does 'contravariance' on AbstractRecoilValue mean in Recoil source type declarations?

I stumbled upon this part of typescript/index.d.ts in Recoil source: export class AbstractRecoilValue { __tag: [T]; __cTag: (t: T) => void; // for contravariance key: NodeKey; constructor(newKey: NodeKey); } How does __cTag…
tondi
  • 53
  • 6
1
2 3
…
17 18