useEffect should trigger when an recoilState is given as a dependency?

[balboFK]

Hello everybody,

1. I have the following setup on my application:

• An atom defined outwards of my component, and them importing it
• A listener for said atom

2. What i'm trying to achieve:
   Render another component if an atom value is reset, or set to a specific value.

3. The problem:
   The effect is firing when the component is just rendered, i'm not making any chances to the atom, just listening to it, and it's already firing the update that renders the other component.

4. Question:
   I had another cases of this happening, that just listening for the atom value, is already firing anything in the useEffect, is this the default behaviour or am I doing something wrong?
   When a recoilState is listenned via a useEffect, it will allways fire by default when the component that has the effect is rendered?

5. Use case:
   If i have a atom that I need to listen to changes to its value, and this value changed is the same as the atom default value, how can i listen to it only when the value is really changed?

queryBuilderState.ts

export const queryBuilderState = atom({ // atom definition
  key: 'queryBuilderState',
  default: {
    filter: null // filter will allways start as null, because of some other conditional checking on other components
  }
})

anyComponent.tsx

import { queryBuilderState } from '../atom'
const [useQueryBuilderState, setQueryBuilderState] = useRecoilState(queryBuilderState)

  useEffect(() => {
    if (!useQueryBuilderState.filter || useQueryBuilderState.filter === 'options') {
      setSelectedOptions(true) // triggers the render of the other component
    }
  }, [useQueryBuilderState]) // firing even if the useQueryBuilderState atom is not changed at all

Hope it's enough information!
Thanks in advance.

[drarmstr]

According to the React semantics for useEffect(), it will always execute initially. I suppose you could setup a ref to monitor the "initial" state to short-circuit the effect if that matches. As you point out, the effect will also not execute if the atom ever changes to an equivalent value.

[balboFK]

Hello @drarmstr !
Thanks for the reply.

Thats basically almost what i did, I created a control pointer to point if it is indeed the first render or not, the solution is as follows:

import { queryBuilderState } from '../atom'
const [isFirstRender, setIsFirstRender] = useState(true)
const [useQueryBuilderState, setQueryBuilderState] = useRecoilState(queryBuilderState)

  useEffect(() => {
      if (!isFirstRender) {
        if (!useQueryBuilderState.filter || useQueryBuilderState.filter === 'options') {
            setSelectedOptions(true) 
         }
      }
  }, [useQueryBuilderState])

Not the prettiest, but it works as expected.