reusablejs / reusable

Simplest way to manage global state in React
235 stars 23 forks source link

Question: Did you use this package with React 17 #123

Open DirkWolthuis opened 3 years ago

DirkWolthuis commented 3 years ago

We've updated our app to React 17, but encountered weird bugs where state updates did not get back in other components where the store was used. It's a complex app, but downgrading to React 16 fixed these bugs for us. I will try to make a real bug report, but have any of you encountered this problem?

adamkleingit commented 3 years ago

Hi, I haven't. @morsdyce ?

morsdyce commented 3 years ago

I haven't used react 17 yet due to some bugs occurring in component libraries but it's usually related to event handling and not state.

Could you reproduce the issue with any of the examples we have?

DirkWolthuis commented 3 years ago

I will give it a try when I have the time. It was a combination of useReducer in a store and a child component that did not received the updated values. Tried debugging it a while but only downgraded to react 16 helped. Will let you know when I’ve created a example.

Op do 29 apr. 2021 om 17:11 schreef Maayan Glikser @.***

I haven't used react 17 yet due to some bugs occurring in component libraries but it's usually related to event handling and not state.

Could you reproduce the issue with any of the examples we have?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/reusablejs/reusable/issues/123#issuecomment-829320093, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACMAFWUHTTWHHBM7542PHE3TLFZILANCNFSM43ZMWAVA .

gev commented 3 years ago

create store:

export const useStore = createStore(() => useState({}));

and use them:

const store = useStore()

returns store === null for the React 17

gev commented 3 years ago

There is a different babel version in the react 17. Could it be a reason?

morsdyce commented 3 years ago

Babel shouldn't be the issue as we don't convert syntax using a babel plugin. I tried reproducing a simple example with React 17 and it worked:

https://codesandbox.io/s/compassionate-fog-ltf4x?file=/src/App.js

It would really help if you could send an example of it not working correctly

gev commented 3 years ago

one more note, I use react native. It not depends from react-dom

morsdyce commented 3 years ago

@gev could you reproduce the issue on expo? I don't have an environment ready for react-native

gev commented 3 years ago

Can't reproduce at expo. All works as well. On my envirenment bug exists when import custom hook from module.

CarpeNecopinum commented 2 years ago

create store:

export const useStore = createStore(() => useState({}));

and use them:

const store = useStore()

returns store === null for the React 17

We had a very similar issue in react-native with React 17 that appears to be caused by the import for the store not actually executing the imported file until a function from it is used. With stores that usually happens within the render method, during which you don't want to be changing around your stores. The solution was to add an "empty" import of the store directly to our App.tsx: import 'stores/thestore'