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 ponent'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?

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 ponent'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?

• javascript
• reactjs
• react-hooks

1 Answer 1

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

For example:

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