0

I have a hook like so

export function useMyStuff(value) {
  const [info1, setinfo1] = useState()
  const [info2, setinfo2] = useState()

  useEffect(() => {
    const asyncFunc = () => {
      if (???) {
        setinfo1(value) // this updates MyComponent as expected
        ... wait some time ...
        setinfo2(value) // PROBLEM: this updates MyComponent
      }
    }
    asyncFunc()
  }, [value])
  ...

  return {
    info1, info2
  }
}

And my component

export default function MyComponent() {
  const [value, setValue] = useState()
  const { info1 } = useMyStuff(value)
  // PROBLEM: component rerenders on info2 change (and info1 of course)
  return (...)
}

I believe my component should only update when I update info1, however it's updating when only info2 updates as well. What should my structure be to only update when info1 updates?

Kevin Danikowski
  • 4,620
  • 6
  • 41
  • 75
  • Where are you calling setinfo1? – lissettdm Apr 02 '21 at 23:10
  • @lissettdm in a useEffect hook in the hook itself. So the hook itself updates. I can add that info – Kevin Danikowski Apr 02 '21 at 23:11
  • Maybe make use of useRef instead of useState for info2 – Jad Al-Hamwi Apr 02 '21 at 23:12
  • JadAlhamwi just tried, no luck. @lissettdm I tried to keep the example as simple as I could, but since you've asked, I've added the async logic, setinfo2 gets updated later on and rerenders MyComponent, but the component was already rerendered once for setinfo1 and it doesn't use info2 – Kevin Danikowski Apr 02 '21 at 23:22
  • This is how React works, why would you expect `setinfo2(value)` to not update state and trigger a rerender? You have 2 states, React components will rerender when any state updates. If you don't want a value updating to trigger a rerender then don't put it in state. Can you explain what the difference is between `info1` and `info2`? Can you explain what this code is trying to accomplish or what you expect it to do? – Drew Reese Apr 02 '21 at 23:30
  • @DrewReese info1 and info2 is loading and my data, respectively. The component that is re-rendering unnecessarily is the one using data actually, it doesn't need to be aware of loading state, only aware of the data updates, yet it is re-rendering when the component starts loading. Any recommendation for a new set up? – Kevin Danikowski Apr 02 '21 at 23:35
  • 1
    @KevinDanikowski check the answer to this post, https://stackoverflow.com/questions/55075604/react-hooks-useeffect-only-on-update There's a custom hook that can trigger render only on dependency update – Josh Apr 02 '21 at 23:41
  • @KevinDanikowski i believe that is the expected behavior, so that in case you want to render a custom loading component while data is being loaded you can, at the same time update to the real component when data is fully loaded. – Josh Apr 02 '21 at 23:44
  • 1
    Sounds like the component you think is unnecessarily rendering is a child component. You can either conditionally render the child when the data is finished loaded, or use the `memo` HOC with equality function to help hint when it should rerender. – Drew Reese Apr 03 '21 at 00:06

0 Answers0