React v18.0 is out

The release of React v18.0 has just been announced. With it comes a number of new and interesting features. I won't go into details about them all, but I want to mention a few that caught my attention.

Automatic batching

The first feature I want to mention is automatic batching. It is a performance improvement when multiple state updates is happening at once.

The following is from the announcement post.

// Before: only React events were batched.
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will render twice, once for each state update (no batching)
}, 1000);

// After: updates inside of timeouts, promises,
// native event handlers or any other event are batched.
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will only re-render once at the end (that's batching!)
}, 1000);

useSyncExternalStore hook

Another thing that caught my eye was one of the new hooks that has been added. I am referring to the useSyncExternalStore hook.

The reason I want to mention this particular hook is that I have experienced the trickiness of trying to sync up with external stores like local storage and having to deal with cross tab subscriptions to changes, etc. so I'm excited to dive into the details of this one to see exactly what it can bring to the table.

Up next

That's all for now. If you want to know more about the new additions in this release, please review the official announcement. Or better yet, install it and have a go at it yourself.

Thanks for reading and happy coding!