Trigger useEffect when other components state variable changes

Question

I am trying to trigger a useEffect in one of my components, when the state variable of another changes.

I have implemented web sockets into my app, and basically want to perform some action when the web socket is triggered. I have the web socket side of things covered and working right now.

This is a basic breakdown of what is going on:

HomeScreen

...
const {
    shouldFetchApplications,
    setShouldFetchApplications
} = useWebSockets();
...
useEffect(() => {
   console.log(shouldFetchApplications)
   // Other code
}, [shouldFetchApplications])
...

WebSocket

...
const {
    setShouldFetchApplications,
} = useWebSockets()
...
const onTaskUpdate = () => {
    setShouldFetchApplications(true)
};
...

useWebSockets

import { useState, useEffect } from 'react'

const useWebSockets = () => {
  const [shouldFetchApplications, setShouldFetchApplications] = useState<boolean>(false)

  useEffect(() => {
    console.log('useWebSockets')
    console.log(shouldFetchApplications)
  }, [shouldFetchApplications, setShouldFetchApplications])

  return {
    shouldFetchApplications,
    setShouldFetchApplications,
  }
}

export default useWebSockets

When my web socket is triggered, it updates shouldFetchApplications to be true, but the useEffect in HomeScreen never triggers, I know setState is async, but I don't see why this would be an issue.

Any ideas on how I trigger the useEffect in my HomeScreen component?

@possum set functions from useState are most definitely asynchronous. Explained nicely [here](https://stackoverflow.com/questions/54069253/the-usestate-set-method-is-not-reflecting-a-change-immediately). — Bets, Apr 20 '23 at 12:17
I understand what you're posting, but that's not what asynchronous means in a javascript context and being imprecise on what asynchronous means causes confusion. They trigger side effects which occur later, but the functions themselves are not asynchronous. They do not have the `async` in their signature and they are not to be awaited. — possum, Apr 20 '23 at 12:27
@possum indeed, terminology is important, however, I think given the context and code snippets it's quite clear that TreyCollier isn't referring to whether the `set` function returns a promise, but rather to the fact that the update is **not** performed synchronously (which is 100% correct). Therefore, your comment is more likely to confuse people, particularly newer coders, and mislead them instead of properly explaining the nuance. — Bets, Apr 20 '23 at 16:27

score 0 · Answer 1 · answered Apr 21 '23 at 14:37

I have since found an alternate solution to my above problem, and have since realised why my code above did not work.

I of course created my own custom hook useWebSockets, which I then was importing into HomeScreen and WebSocket, but failed to realise that each were creating their own instance of useWebSockets, and as a result, HomeScreen would never see a change in the shouldFetchApplications value when updated by WebSocket

Trigger useEffect when other components state variable changes

1 Answers1