-
Notifications
You must be signed in to change notification settings - Fork 47.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
React useEffect / useState not recognizing state values when working within a GraphQL subscription #14042
Comments
I experienced that too, and I think it is little confusing at first but I think it is on purpose. When you put the second argument to
However in your case you depend of the
However I think it is not the proper way to do it (because you dont want to subscribe at every todoList change) |
[EDIT]: I take back the below comment, because adding @AyWa I don't think that is the issue (although I see where you're coming from) - we would not want to re-subscribe if the list of todos changed. The subscription should be set up and torn down only once in the lifecycle. I tried moving the export function useSubscription() {
const [todoList, updateTodos] = useState([]);
// Removes the reference to `todoList` out of the effect, but state is still being reset somewhere
function addTodosToState(newTodos) {
updateTodos([ ...todoList, ...newTodos ])
}
useEffect(async () => {
const todoData = await API.graphql(graphqlOperation(query));
addTodosToState(todoData.data.listTodos.items);
}, []);
useEffect(() => {
const subscriber = API.graphql(graphqlOperation(subscription)).subscribe({
next: data => {
const {
value: {
data: { onCreateTodo }
}
} = data;
addTodosToState([onCreateTodo]); // Don't reference `todoList` in this effect
}
});
return () => subscriber.unsubscribe();
}, []);
return todoList;
} As far as I can tell the posted example follows the subscription example in the docs, with the exception that it is merging previous state. |
It does not. In you example you have added
Has you can see in the doc they don't put second argument, which means, that the From the doc:
|
@thchia I think there is multiple way to achieve that. One way is with reducer, but I guess there is other way too ? https://codesandbox.io/s/03l8z5m8nw
|
Hey @AyWa this is the solution I think I was looking for. This does indeed fix both the issues I've been having (either subscriber being called on every render or the state being stale). Thanks so much for your help with this, I'm going to go ahead and close this ticket! |
@AyWa 's solution worked for me (i.e using a reducer) However I was able to solve a similar issue (subscribing once in useEffect and updating state in callback) while still using useState(), alongside with the "function updater" option of the state update function as mentioned here: |
Do you want to request a feature or report a bug?
bug? (maybe) or I could be using the hook wrong
What is the current behavior?
When using
useEffect
, the current state value is not available in the state, only the old state value is available.If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:
https://codesandbox.io/s/5xwjrjwo74
What is the expected behavior?
State is available in memory
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
16.7.0-alpha.0
code.zip
The text was updated successfully, but these errors were encountered: