useState and useRef initial values getting computed every re-render

user_8467909 0
Viewed 1232

There's a thing I'm late to notice:

const [object, setObject] = useState(new SomeObject());

Here, we construct an instance of SomeObject on every single re-render. Then, if it's the component's initial render, it gets returned to object, otherwise it's just discarded.

Whatever is passed in as the initial argument is evaluated and discarded over and over again. It also better be pure, since re-renders can happen in arbitrary intervals and in arbitrary amounts. Given that constructing some objects or large arrays can be quite expensive, isn't it a bit suboptimal?

What's the solution here? Am I misunderstanding something, or such an elementary feature in React is implemented in such an suboptimal way?

react-hooks reactjs javascript
1 Answers

You can pass a function to the useState hook to have your value lazily initialized.

For example:

const [state, setState] = useState(() => new SomeObject());
CMS_54450
Related