Recoil: use outside of react

[ryanking1809]

Hi, I just saw React Europe Dave's talk and this sounds like it could be my perfect state management system in the future. However, I do have some three.js objects I update outside of react for performance reasons. Is it possible to observe changes outside of react?

[davidmccabe]

Hi Ryan, thanks for your interest! So you want your three.js objects to respond to changes to atoms, do I understand that right?

You could do that with a transaction observer, or by rendering a React component that subscribes to an atom and performs the necessary action in an effect. Would that work for your use case?

We also have someone at FB rendering with React Art.

[RichardLindhout]

@ryanking1809 have you seen this library: https://github.com/react-spring/react-three-fiber. But it's very performant. (if you memoize some things which are more performance heavy)

[davidmccabe]

We've had good luck using React rendering for our visualizations too. The only thing to be aware of is that Recoil is bound to a particular React root and hence a particular renderer. You can use Recoil transaction observation to pass state changes between roots. React does not schedule changes across roots and I am told never plans to.

[RichardLindhout]

With Redux I sometimes did this to access state outside React

let store: undefined | any
export function getState(): AppState {
  return store.getState() as AppState
}

export default function configureStore() {
  store = createStore(rootReducer, initialState, composeEnhancers())
  store.dispatch({ type: 'INIT', payload: {} })
  return store
}

[RichardLindhout]

For example in my router I need to get something from my global state for params to my preloadedQuery I only need a static snapshot of the state. I don't need to subscribe.

[davidmccabe]

It's worth mentioning that, unlike Redux, Recoil state is not stored globally anywhere, but is specific to a particular React context. Not only that, but it's specific to a particular rendered tree (for concurrent mode, coming soon). So there is no "current state", just "the last committed state as seen by this particular component".

[ryanking1809]

Some sort of transaction observer might do the trick (I'm not super familiar with the concept), but a react component would be too much of a hassle.

I am very familiar with react-three-fiber although to maximise performance I found myself writing a lot of imperative three.js code to keep things efficient and found managing all the refs to be a bit cumbersome. It's very nice but doesn't quite fit my use case. If you need to efficiently update many objects quickly, or animate objects, you need to circumvent react - and I'm doing a lot of this!

I currently use https://github.com/alloc/wana which is a very nice little observable library. And I basically use this create something similar to mobx's reaction function.

reaction(
    () => state.value,
    (value) => threeObject.update(value)
)

I'm getting to the point where observables are getting hard to manage and I need something that can dance between and observables and more centralized flux style architecture. And that's where my interest in this library lies - combining observables with this "Cross-App Observation" I believe would make observables significantly easier to debug and implement things like undo with.

Anyway, that was a long way of saying, if there was a way to respond to atoms outside of react that would be super swell. This could be a great state management library that works with any platform. I'll be a keeping an eye on where this goes!

[RichardLindhout]

I like most of the API so I created a very small library which is suitable for my use-case https://github.com/web-ridge/react-ridge-state