CODEWITHSUNDEEP
react-hooksstate
KyoKatarz
KyoKatarz

Reputation: 111

How to stop React Hooks component rerender on SOME state changes?

I have the following code:

const PlayArea = () => {
  const [foo, setFoo] = useState('foo')
  const [bar, setBar] = useState('bar')

  return <div>{bar}</div>
}

In my project, whenever I use setFoo, the whole component re-renders, and I'm trying to prevent that. I only want the component to re-rerender when bar changes.

Is there anyway that I can keep the component from changing from using setFoo ?

Upvotes: 0

Views: 37

Answers (1)

Giorgi Moniava
Giorgi Moniava

Reputation: 28685

Is there anyway that I can keep the component from changing from using setFoo ?

No. By design state variables work such that when you change them that component will rerender.

But If you don't want to rerender your component when you update that variable then why are you using a state variable? Use useRef

Keep in mind that useRef doesn’t notify you when its content changes. Mutating the .current property doesn’t cause a re-render.

Upvotes: 1

Related Questions