更新列表中的某些项目时避免重新渲染所有项目

Question

really need you help here

I'm loosing a lot of time trying to optimize my app, I think there's something I'm not getting about React

Here's a typical case : I got a form with some interconnected inputs (Changing an input can disabled/enabled anothers) Something looking like my code :

const Form = (form)=>{  
  const [inputs, setInputs] = useState(form.inputs)
  const updateInputs = (updates)=>{
    /**
     * Changing some inputs
     */
  }

  return inputs.map(input=>
    <InputComponent {...input} key={input.id} onChange={updateInputs}></InputComponent>
  )
}

My problem is when input is changed, all inputs are rerendering.

Memo/PureComponent is useless here because of the updateInputs function

Can't use "useCallback" hook on "updateInputs" because it's caching "inputs" state, which is updated every change

And yes I use React profiler.

I got the same issue with checkbox list & radio list. Everytime I got a list with a state shared between items, I got this issue.

Answer 1

Thanks to @HaveSpacesuit and this article (not the whole article, just the step #4)

My issue was : i couldn't put useCallback on "updateInputs" because I was making something like :

  const updateInputs = useCallback((updates)=>{
    const localInputs = [...inputs]
    /* update localInputs */
    setInputs(localInputs)
  }, [])

But doing this would memoize "inputs" state without refreshing it.

Setting "inputs" in the useCallback parameters would create a new function reference every update, which makes useCallback useless.

The solution is :

  const updateInputs = useCallback((updates)=>{
    setInputs((oldInputs)=>{
      const localInputs = [...oldInputs]
      /*update localInputs*/
      return localInputs
    }
  }, [])

Like this, the function will update fresh "inputs", and the function will keep his reference between rerenders thanks to useCallback.

I went from ~200ms to ~25ms on every user interaction