React avoid rerender of parent component when changing state from child component

Question

I have this component:

const Parent = () => {
  const [a, setA] = useState({});

  return <Child setA={setA} />
}

const Child = ({ setA }) => {
  const [b, setB] = useState();
  const handleSomething = () => {
    setB({});
    setA({});
  }

  return b.map(etc => (...));
}

Basically, I want to avoid rerendering Parent component when a changes. Because this makes Child rerenders and it resets the internal state. How can I avoid it?

Answer 1

Ok so I was wrong, the rerender wasn't triggered because of the a or setA , it was because I was passing an object to Child like this

<Child filters={{someFilter, someOtherFilter}} setA={setA} />

To fix this I did this:

const filters = useMemo(() => ({ someFilter, someOtherFilter }), [someFilter, someOtherFilter])

<Child filters={filters} setA={setA} />