What are primitives in JavaScript and why do they work differently from objects in the context of reference management in React?

In JavaScript, primitives are simple data types: string, number, boolean, null, undefined, symbol, and bigint. They are stored and passed by value, meaning that when assigned or passed to a function, a copy of the value is created.

Objects (including arrays and functions) are complex types that are passed by reference. When assigning an object to a variable, a reference to the same object in memory is copied.

In React, this is important for rendering optimization. When comparing props or state, React uses shallow comparison. If the value is a primitive, comparison by value quickly determines if it has changed. If it is an object, the reference is compared: if the reference hasn't changed, React considers the object unchanged, even if its internal fields have changed.

Therefore, to properly update components in React, new objects are often created when changes occur (immutability), so that the reference changes and React detects the change.

Example:

const prevState = { count: 1 };
const nextState = { count: 1 };

console.log(prevState === nextState); // false, different references

const prevCount = 1;
const nextCount = 1;

console.log(prevCount === nextCount); // true, identical primitives

Thus, primitives work differently because they are passed and compared by value, while objects are compared by reference, affecting the update logic in React.