0

I have a react-native app that has boolean values to render certain components but the state is not updating in useCallback


export const Foo = <T>(props):<T> => {
  const value = undefined
  const [bar, setBar] = useState<boolean>(false)
  
  useEffect(() => {
    pipe(
      value,
      O.fromNullable,
      O.fold(
        () => setBar(false),
        () => setBar(true)
      ),
    )
  }, [value])

  const foo = useCallback(() => {
    runFirstFunction() //changes some of the states 
    pipe(
      bar,
      B.fold(
        () => falseFunction(),
        () => trueFunction(),
      ),
    )
    restOfFooFunctionality()...

  },[setBar])

}

foo is getting called as the onPress function for a component, when foo is called the state value gets a value and the useEffect takes effect and bar has the value of true but foo initially has the state of bar where it is false and nothing in foo will make it rerender to update the state I am looking for a way to get the current state of bar inside useCallback() to call the functions inside of useCallback()

I have tried playing around with the dependencies but that just broke the app and calling setState doesnt update the state inside useCallback(), hope someone has and awesome solution fr this dont want to redo the entire file

Wayne Filmater
  • 21
  • 3

1 Answers1

1

In your code, the useCallback hook is only depending on the setBar function, which is used to update the bar state. However, setBar is not called inside the foo function, so there is no need to include it as a dependency.

To get the current value of bar inside the foo function, you can use the bar variable directly.

export const Foo = <T>(props):<T> => {
  const value = undefined
  const [bar, setBar] = useState<boolean>(false)
  
  useEffect(() => {
    pipe(
      value,
      O.fromNullable,
      O.fold(
        () => setBar(false),
        () => setBar(true)
      ),
    )
  }, [value])

  const foo = useCallback(() => {
    runFirstFunction() //changes some of the states 

    if (bar) {
      trueFunction();
    } else {
      falseFunction();
    }

    restOfFooFunctionality()...

  }, [bar, runFirstFunction, falseFunction, trueFunction, restOfFooFunctionality])

}
Espiring
  • 69
  • 8