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

Optimizing performance for arbitrarily large number of inputs in react

Specifically with Material UI, I'm trying to render a large number of inputs (> 100) and manage a global state effectively. I run into serious performance issues like input lag at around 50 inputs but the lag is still noticeable at around 10 inputs.…
cap
  • 337
  • 3
  • 14
0
votes
2 answers

Recoil Tutorial findIndex

In the Recoil tutorial at https://recoiljs.org/docs/basic-tutorial/atoms, they use const index = todoList.findIndex((listItem) => listItem === item); to get the index of an object in an array. The code works but I can't replicate it, I always get a…
cap
  • 337
  • 3
  • 14
0
votes
1 answer

can we update an atom state whenver another atom changes in RecoilJS

im quite new to recoiljs atom and stuff. Assumming i have 2 atoms timeRangeAtom which determines the time range of the selection export const timeRangeAtom = atom>({ key: 'timeRangeAtom', default: [ dayjs().subtract(7,…
Jake Lam
  • 3,254
  • 3
  • 25
  • 44
0
votes
1 answer

How can i write(=update) Localstorage object in Recoil Atom?

I try to get LocalStorge value for update Recoil atom object value below code. const LoginState = atom({ key: 'login', default : null }); const Home: NextPage = () => { const [login, setLogin] = useRecoilState(LoginState) …
Boris Park
  • 105
  • 1
  • 10
0
votes
0 answers

Is the state of recoil reset to the intial value when the component renders?

I using recoil in a react project to manage state and I would like to know if the state is reset automatically by the library when the component unmounts or not. The use case is that I use useRecoilState to get the state from recoil and then I…
Saif
  • 249
  • 5
  • 15
0
votes
0 answers

Recoil state is reset when the component unmounts

I am working on a react project where I have a table of paginated entries fetched from the backend and when I click on any entry, I navigate to a page where all details of this entry are being displayed. The point is, I am using recoil to manage the…
Saif
  • 249
  • 5
  • 15
0
votes
1 answer

React Recoil "Argument of type 'any[]' is not assignable to parameter of type 'never[]"?

I'm following the React Recoil Todo List tutorial, but for some reason their are type errors when following the tutorial and I'm unsure how to satisfy them correctly. Here is the code: export const todoListAtom = atom({ key: 'todoListAtom', …
Noob
  • 754
  • 3
  • 10
  • 27
0
votes
1 answer

Cannot Prevent Async on GraphQL Mutation and Recoil State updating process

I am working on a Chat Room portion of a larger React Native app and am facing issues with the updating of the page after a text has been sent. Currently, when the user compiles a text in a TextInput and hits the send button, it triggers a mutation…
user17306847
0
votes
2 answers

How to run useEffect before render for authentication

I have reading component which must show only when user is loggedIn. I now redirect the user to /login page if the user is not authenticated. But during the redirect, the reading page is displayed for a few milli seconds allowing the…
Sai Krishnadas
  • 2,863
  • 9
  • 36
  • 69
0
votes
1 answer

How can I set a nested recoil state?

I have a nested plan list. And I want to add plans and display it using recoil. But I don't need to add the name attribute but only plans by inputs. import React, { useState } from "react"; import "./styles.css"; import { RecoilRoot, atom,…
user42195
  • 419
  • 4
  • 16
0
votes
2 answers

Attempt to set read-only Recoil Value: selectorFamily

I make some test code. Added selectorFamily from Recoil to set up state with names. It will be used in future to get some names from API with provided page. Names are listed below in listing tag and one button. When you click button it will change…
kkatusic
  • 119
  • 1
  • 8
0
votes
1 answer

Why is the assigned object not being written too?

I have a recoil state that is an object that is structured like this: const Proposal = atom({ key: "PROPOSAL", scopes: [{ assemblies: [{ items: [{}] }] }] }) When theres updates to an item in the UI I am updating the atom by…
Ryne
  • 1,195
  • 2
  • 14
  • 32
0
votes
0 answers

Use of Recoil State within Component in Head

I am working on a favicon component, which will go into the within DOM. I want to set a recoil state so that based on user actions, I can update the favicon & show updates to the user on the browser tab. The favicon component is simply like…
Kayote
  • 14,579
  • 25
  • 85
  • 144
0
votes
1 answer

Can the default value of a recoil atom be an object of objects?

Can I create a recoil atom with default value as an object of object? See the below code for reference. export const formState = atom({ key: "formState", default: { name: { firstName: "", lastName: "" } } });
0
votes
0 answers

Difference between react vs react+next's suspense behavior

I want to use react suspense. The suspense behavior I want is to not show the fallback until a certain amount of time. Using react with next works as intended. However, react alone flickers. Why does this only work when using next ? What's the…
pruge
  • 31
  • 1
  • 4