Does change in each independent state in functional component triggers a render for the component in React?

Question

When we have multiple independent states in a component then if I change any one of them, will it trigger a re-render of the entire component?

Initialise const [email, setEmail] = useState('') const [val, setVal] = useState(true)

Update setVal(false)

Will this render the whole component again?

Answer 1

Yes the Component will be rendered again. Let me add: Although if you have two states changing (almost) simultanously the state update will be batched. In React 18 React batches state updates in React events handlers, promises, setTimeout and native event handlers resulting in only one rerender.