Use this tag referring to the React state management library. Preferably, use it with the tag [reactjs].
Jotai (pronounced joe-tie, it means "state" in Japanese) is an atomic state management library for React.
Questions tagged [jotai]
35 questions
3
votes
1 answer
Jotai - Update a async loadable atom
Current Code
const asyncAtom = atom(async () => {
const res = await (
await fetch("http://localhost:3000/api/transactions")
).json();
return res;
});
const loadableAtom = loadable(asyncAtom);
const [transactions] =…
Snickers03
- 31
- 4
3
votes
3 answers
Storing function as jotai atom?
I am wondering if it's possible to store a function as a jotai atom, and if so, how. Simply replicating the standard pattern for creating and consuming jotai atom-states, which works fine when the value of the state is an array, does not work when…
FZS
- 243
- 1
- 8
2
votes
1 answer
Nav Menu Active Element and State Management Issue
I am trying to show an active element for the current page, but it keeps getting reset when I go between pages to the default value. Each of the links goes to a different route I have defined in React-Router. I am trying to use jotai for…
usagibear
- 303
- 3
- 12
1
vote
1 answer
Formik state change
I'm currently working on a React application that involves a lot of calculations. I'm using Formik for form management and lodash for some utility functions. Here is a snippet of my code:
import { useEffect, useRef } from 'react';
import Paper from…
Safiul Alam
- 33
- 4
1
vote
1 answer
Next.js 13 - Jotai's useHydrateAtoms hook causes a UI missmatch
Working on a Next.js 13 project using the new app directory and jotai as global state manager. Now I am trying to pass an initial state to my atoms using the useHydrateAtoms hook as seen in the official documentation, but this causes a hydration…
Fabio Nettis
- 1,150
- 6
- 18
1
vote
1 answer
react: jotai, how to handle Promise inside atom()
I was following a tutorial and was using the exact same code but because of a different dependency version, I get an error.
The Tutorial dependency version:
"jotai": "^1.9.0",
"jotai-tanstack-query": "^0.4.0",
My dependency version:
"jotai":…
Yukinosuke Takada
- 323
- 1
- 9
1
vote
0 answers
Not able to use environmental variables in Jotai
I would like to get data from a CMS and store it globally using Jotai. But I keep getting
Uncaught TypeError: Expected parameter accessToken
When I try to use environmental variables.
At the same time, I don't have this error when I use my token…
Danny Lenko
- 45
- 1
- 8
1
vote
0 answers
Jotai atom always null
I have a React Native Expo application with Jotai, but the Jotai atom is always null.
App.tsx
const App = () => {
const [organisation, setOrganisation] = useAtom(organisationAtom)
useAsyncEffect(async () => {
const value = await…
KittyCat
- 415
- 4
- 9
- 26
1
vote
1 answer
How to read data from an array of atoms in Jotai state management library
I have an array of atoms, I need to get the data from each of those atoms and store it in a new array.
As you can see in the image I am getting an array of atoms from requestAtoms and then I have to create a new array from the atoms that I get from…
Haider Mansoor
- 134
- 1
- 8
1
vote
0 answers
Why Jotai always keeps the previous satete in React-Native?
I'm developing an android application with React-Native and i use Jotai to manage states.
There's a problem with the Jotai state updates.
When i try to update the state, it always returns the previous state. For example, i'm initializing the state…
caliskanata
- 488
- 1
- 2
- 14
1
vote
0 answers
How to store data coming from Firebase in my store file using Jotai?
What I'm trying to do is not display the data coming from Firebase in my component, but also store it in my store, more specifically in this line:
export const watchSeriesJotai = atom();
How can I do this?
My store:
import firebase from…
Henry
- 11
- 2
1
vote
1 answer
How do you rerender a React component when an object's property is updated?
I have an object in my React application which is getting updated from another system. I'd like to display the properties of this object in a component, such that it updates in real time.
The object is tracked in my state manager, Jotai. I know that…
Peter Edmonds
- 355
- 3
- 15
0
votes
0 answers
Imports with Jotai and create react app failing
I'm attempting to use the jotai-react-query library, and so I want to leverage
import {useHydrateAtoms} from "jotai/react/utils/useHydrateAtoms";
However when I'm building a test with jest, it cannot find the import. To verify, I created a blank…
PlexQ
- 3,154
- 2
- 21
- 26
0
votes
1 answer
How to handle creating hooks dynamically on event handler function
I am quite new to React and stumped on the best way to implement a form with the need for persistent storage of some filters. There are 10 different categories in the form, and each category has a different set of filters that need to be persisted…
m-00
- 41
- 5
0
votes
0 answers
How to set initial value to atom when parent component re-render?
Environment
react: 18.2
jotai: 2.2 (latest)
Problem
const ParentComponent = () => {
const [val, setVal] = useState(0);
return
Byeongin Yoon
- 3,233
- 6
- 26
- 44