Can Jotai be used in order to replace the React Context API?

[quangbuule]

Hi team, I am trying to achieve the React Context behavior, and not sure if we can do that with Jotai.

Assuming we got a root component that receives data from props and passes down the data to its children. With React Context Provider, it can pass the data to the children in just 1 rendering cycle. I am not sure if we can do that (or if we should do that) with atoms.

Currently, Jotai provider only handles initial values, and there is no API (that I can see) to change the value in 1 render cycle. The only way to work it out is, changing the atom value on side-effect when the root component receives new data.

Am I missing anything? Thanks!

[dai-shi]

Hi, our hope is to support all context use cases.
For simple cases, initialValues prop should work.
Can you explain what context use case is difficult with it? Maybe a short code snippet?

We do have useHydrateAtoms for 1 render cycle, but its usage is limited.

[dai-shi]

I'm genuinely intrigued that there is no way to do this cleanly with jotai without react context!

jotai atoms in react context (or props) is possible and a valid pattern.
we suggest atoms-in-atom pattern in such a case.

[TwistedMinda]

@dai-shi Could you provide some pseudo code to show the idea? I'm really not understanding how u guys fix this issue.

If there is only one ComplexButton in the app its easy, cause you can use a single atom.
But if there are many ComplexButton's, and you decide to pass an atom via prop, how do you access this atom from the nested component ?

Thank you for your time

[dai-shi]

Does this doc help? https://jotai.org/docs/guides/atoms-in-atom
tbh, I'm not confident if I understand your issue correctly.

[TwistedMinda]

@dai-shi Hm. No I don't understand how you fix OP's issue with atoms as props. That would mean to me that the atom prop would have to be passed down every child component in our "ComplexButton - Lots of nesting - Text" Example.

like so:

const ComplexButton = (props) => {
  return (<SubView atomProp={props.atomProp}></SubView />)
}
const Subview = (props) => {
  return (<MoreNestedView atomProp={props.atomProp}></MoreNestedView />)
}
const MoreNestedView = (props) => {
  return (<Text atomProp={props.atomProp}></Text />)
}
const Text = (props) => {
  const propValue = useAtomValue(props.atomProp}
  console.log('yay we got it', propValue)
  return (null)
}

Doesn't look good at all, why would even use an atom here instead of a normal prop.
I'm lost :p

[dai-shi]

Sorry, I think I misunderstood your comment in the last line of #973 (reply in thread). Please forget about atoms-in-atom thing.

As far as I remember, the OP's issue is if we can use jotai for context without state. Then, no. It's impossible, and out of the scope. jotai doesn't do prop propagation, but does state subscription.