Do you know unstable_batchedUpdates in React ? (enforce batching state update)

Moustafa Mahmoud — Mon, 21 Mar 2022 01:59:03 +0000

It is ok if this is your first time to read about it, because it is one of the not documented APIs in React, Yes you can not find it in the react's official documentation, although it is a part of the library.

First we need to know What is batching state update?

According to Dan Abramov -co-authored the Create React App

Batching is when React groups multiple state updates into a single re-render for better performance.

function App() {
  const [count, setCount] = useState(0);
  const [isEven, setIsEven] = useState(false);

  function handleClick() {
    setCount(c => c + 1); // Does not re-render yet
    setIsEven(f => !f); // Does not re-render yet
    // React will only re-render once at the end (that's batching!)
  }

  return (
    <div>
      <button onClick={handleClick}>counter{count}</button>
    </div>
  );
}

In earlier React versions (17 and earlier) there was batching only in browser event (like click), and it wasn't available in

Native DOM event listeners (e.g., el.addEventListener())
Async callbacks (e.g., promises, timeouts, intervals)

and to make it available you had to use unstable_batchedUpdates to enforce batching

How to use it unstable_batchedUpdates ?

import {unstable_batchedUpdates} from 'react-dom';

const batchUpdate = unstable_batchedUpdates(() => {
  setName('Moustafa');
  setAge(25);
});


batchUpdate() //this will group all state changes inside and apply it in one re-render

Good News
if you're using React 18 and above, you do not need it anymore because React 18 now support automatic batching.

This means that updates inside of timeouts, promises, native event handlers or any other event will batch the same way as updates inside of React events

you can read more about it here

Warning ⚠️

Since React 18 now supports automatic batching and it is
a not documented API and it might get removed in a future major version of React after popular libraries no longer depend on its existence.

How to share a single global object across your app (Singleton design pattern)

Moustafa Mahmoud — Sun, 20 Mar 2022 01:48:29 +0000

One of the most important features in OOP is you can create a single class and instantiate instances of it as many as you want.

but what if you need to create only a single object to deal with or make sure your class will be instantiated once ?

At this point implementing a Singleton will be a good choice.
and the singleton can represent the following objects

Database Connection Object
Current Logged-in user Object
Provisioning an OTP Object

or any kind of objects that you need to make sure there is only one instance of it in your app

How to implement

let's say we wanna create a counter and that counter will be available throughout your app.

Since in js we can create objects directly without creating a class first,

1- Create a variable that holds the current value of the counter and assign it an initial value

let currentValue = 0

2- Create an object to change the value with it

Since in js we can create objects directly without creating a class first, a simple counter object well be enough to implement a singleton

let currentValue = 0

const counter = {

increment(){

  return ++currentValue

  }

decrement(){

  return --currentValue

  }

}

3- Prevent modifying the `counter` object and export it

let currentValue = 0

const counter = {

increment(){

  return ++currentValue

  }

decrement(){

  return --currentValue

  }

}

Object.freeze( counter )

export { counter }

notes

We use const with counter object (the Singleton) to prevent reassigning it by mistake, also we freeze it to prevent adding or removing attributes or changing the value of one of them.
Since objects are passed by reference, you'll get the same instance every time you import it in another file
You can create more methods based on your requirements in your app, like creating a getter method to get the counter value.

hope that article answered your question and see you next time,

Thanks

DEV Community: Moustafa Mahmoud