React useEffect / useState not recognizing state values when working within a GraphQL subscription

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

[AyWa]

Maybe we do have to subscribe/unsubscribe on every render…

@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

const initialState = { todoList: [] };

function reducer(state, action) {
  switch (action.type) {
    case "set":
      return { todoList: action.payload };
    case "add":
      return { todoList: [...state.todoList, action.payload] };
  }
}

export function useSubscription() {
  const [state, dispatch] = useReducer(reducer, initialState);

  useEffect(async () => {
    const todoData = await API.graphql(graphqlOperation(query));
    dispatch({ type: "set", payload: todoData.data.listTodos.items });
  }, []);

  useEffect(() => {
    const subscriber = API.graphql(graphqlOperation(subscription)).subscribe({
      next: data => {
        const {
          value: {
            data: { onCreateTodo }
          }
        } = data;
        dispatch({ type: "add", payload: onCreateTodo });
      }
    });
    return () => subscriber.unsubscribe();
  }, []);

  return state.todoList;
}

[ayal]

@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: https://reactjs.org/docs/hooks-reference.html#functional-updates