react-hooks/exhaustive-deps warnings when using useMemo to try and prevent unnecessary re-rendering of the controls.

[Sean-Bradley]

In the first example, the buttons are dynamically created from an array.
Every time a button is pressed, it changes some local state, which causes a re-render and that causes the buttons to be re-created.
See console output in example link,
CodeSandbox : https://codesandbox.io/s/leva-test-1-c1omd2?file=/src/App.jsx

This is pretty obvious to the expert eye why the buttons are being recreated when the state changes.

So, if I try to memoize the creation of the buttons. it works as intended and doesn't recreate the buttons every time the local state changes.

  const buttons = {}
  useMemo(() => {
    positions.forEach((p, i) => {
      console.log('creating button ' + i)
      buttons['button ' + i] = button(() => {
        setTo(p)
      })
    })
  }, [positions])

  useControls('Camera', buttons)

However, there is now the react warning "react-hooks/exhaustive-deps", despite my example now working as intended.
See console output in example 2 link : https://codesandbox.io/s/leva-test-2-mj1d09?file=/src/App.jsx
In the example 2 link, the buttons are being created only once, even when you change the local state. Perfect, except for the warnings.

So then to solve the react-hooks/exhaustive-deps warning, I add the extra dependency to the useMemo hook.

  const buttons = {}
  useMemo(() => {
    positions.forEach((p, i) => {
      console.log('creating button ' + i)
      buttons['button ' + i] = button(() => {
        setTo(p)
      })
    })
  }, [positions, buttons])

And then I get a different react-hooks/exhaustive-deps warning saying to wrap the initialization of 'buttons' in its own useMemo() Hook.
CodeSandbox Example 3 : https://codesandbox.io/s/leva-test-3-xyjcjc?file=/src/App.jsx

Ok, so then I do it,

  const buttons = useMemo(() => {}, [])
  useMemo(() => {
    positions.forEach((p, i) => {
      console.log('creating button ' + i)
      buttons['button ' + i] = button(() => {
        setTo(p)
      })
    })
  }, [positions, buttons])

Codesandbox : https://codesandbox.io/s/leva-test-4-lmhpey?file=/src/App.jsx

So, all warnings are now gone, but if I run it, then I get TypeError Cannot set properties of undefined (setting 'button 0')

I have tried all kinds of combinations to try and get this small demo to not recreate the buttons each time the state changes while also not having the react-hooks/exhaustive-deps warnings.

I'm sure the answer is there, but I'm just unable to see it.

[dbismut]

Hey @Sean-Bradley, a few observations:

• what's the problem with buttons being recreated on each render? Is there some scaling issue that I'm not aware of?
• there's no problem with bypassing the exhaustive-deps lint rule in general, as long as you know what you're doing. We actually do that a lot in Leva 🤧

However, here the solution to your problem is pretty obvious:

 const buttons = useMemo(() => {
     const _buttons = {}
    positions.forEach((p, i) => {
      _buttons['button ' + i] = button(() => setTo(p))
    })
   return _buttons
  }, [positions, setTo])

And if you're a fan of the reduce function:

 const buttons = useMemo(() => positions.reduce((acc, p, i) =>
  Object.assign(acc, { [`button ${i}`]: button(() => setTo(p)) }), {}), [positions, setTo])

[Sean-Bradley]

Excellent, you solved it straight away.
I did come up with a different solution in the end, but I like yours better.

I created a useRef to track if the buttons were created.
CodeSandbox : https://codesandbox.io/s/leva-test-5-xyt4hc?file=/src/App.jsx

I wanted to solve this since every millisecond counts in Threejs. Only a few buttons show no noticeable difference, but if I had many varied controls, a bit like your example here,
https://codesandbox.io/s/leva-3d-9i4h8?file=/src/App.js
then I would want to optimise.

Looking at your example, it's hard for me to prove, but I think it re-creates all of those controls each render. Just sliding the slider triggers the function which is then running multiple useControls each time. See where I console log "here".

Leva is brilliant by the way. I think many people agree.

[dbismut]

Thanks for the kind words. Don't be afraid about renders as long as they don't happen hundreds times per second. Bottlenecks in WebGL happen because of post processing, lights, shadows, instancing, vertices, shaders etc. Not because you don't memoize some props in React. And btw using useMemo has a cost. Not a big one but it doesn't come for absolutely free. Good luck!