How to make a class value reactive in React

Question

I have a simple class, something like this:

class ReallyHugeClass {
  constructor() {
     this.counter = 0;
  }
  increment = () => {
     this.counter += 1
  }
}

If I use it in the code in a straightforward way it won't keep its state. The class will be recreated every time on render and it's not reactive at all.

const Component = () => {
   const instance = new ReallyHugeClass();
   return (
       <button onClick={instance.increment}> 
          {instance.counter}
       </button>
   )
}

Don't rush to say: you don't need the class! Write this:

const Component = () => {
   const [counter, setCounter] = useState(0);
   return (
       <button onClick={() => { setCounter(value => value + 1) }}> 
          {counter}
       </button>
   )
}

I used the ridiculously small class example, but the real one is complicated. Very complicated. I can't just split it into the set of useState calls.

Let's go forward. I can wrap the instance to useRef to save its value.

const Component = () => {
   const instance = useRef(new ReallyHugeClass());
   return (
       <button onClick={instance.current.increment}> 
          {instance.current.counter}
       </button>
   )
}

The value is saved, but it's still not reactive. I can somehow force the component to rerender by passing the corresponding callback to class, but it looks awkwardly.

What's the right pattern to solve such task in React? It looks that it's quite likely situation.

I have a class. I need that component that used its content rerender on its change. I want to do it in a elegant and canonical way. — nitrovatter, May 11 '22 at 19:30
@AseemGautam, it's pretty easy (useRef). I want to rerender component on its properties change also in a elegant way. — nitrovatter, May 11 '22 at 20:31
@nitrovatter How do you know if the class instance "changes"? You'll need to give React something to work with. — Bergi, May 11 '22 at 22:35

score 1 · Answer 1 · answered Aug 31 '23 at 09:25

Create an abstract class that tracks "clients" that subscribe/listen to it.

class EventEmitter {
  constructor() {
    this.listeners = [];
  }

  addListener(listener) {
    this.listeners.push(listener);
  }

  removeListener(listenerToRemove) {
    this.listeners = this.listeners.filter(listener => listenerToRemove !== listener);
  }

  notify() {
    this.listeners.forEach(listener => listener());
  }

  getListeners() {
    return this.listeners;
  }
}

Extend your class with EventEmitter to allow React to listen to it for changes

class ReallyHugeClass extends EventEmitter { // <-- Extend the class
  constructor() {
     super();
     this.counter = 0;
  }

  increment = () => {
     this.counter += 1
     this.notify() // <--- Fire notify() after you update state  
  }
}

Create a React hook that can take in a class instance that extends EventEmitter and add listeners on mount (and remove on unmount)

import { useEffect, useState, useRef } from 'react';

const useEventEmitter = (instance) => {
  const [, forceUpdate] = useState(0); // <-- Simply incrementing a counter will cause a re-render
  const listenerRef = useRef(null); // <-- Hold a reference to the current listener function across renders

  useEffect(() => {
    const newListener = () => {
      forceUpdate(prev => prev + 1);
    };
    
    // Remove any existing listeners
    if (listenerRef.current) {
      instance.removeListener(listenerRef.current);
    }

    // Add the listener
    listenerRef.current = newListener;
    instance.addListener(newListener);

    // Cleanup listener and remove on unmount
    return () => {
      instance.removeListener(newListener);
    };
  }, [instance]);

  return instance;
};

You can define the class outside the render (same instance will be used across renders or you can useRef inside the component) and use the hook to listen for changes in your class and your React component will re-render everytime notify() is called from the class.

const instance = new ReallyHugeClass()  

const Component = () => {
     useEventEmitter(instance); // <-- "connect" to the class and make this component listen for changes to re-render
 
    return (
        <button onClick={instance.increment}> 
            {instance.counter}
        </button>
     )
}

Usiel · Answer 2 · 2022-05-12T21:02:21.170

0

One solution would be to use useRef and force rendering with a useState. Here an example:

const { useRef, useState } = React;

      class ReallyHugeClass {
        constructor() {
          this.counter = 0;
        }
        increment() {
          this.counter += 1;
          console.log(this.counter);
        }
      }

      function App() {
        const instance = useRef(new ReallyHugeClass());
        const [forceRender, setForceRender] = useState(true);

        return (
          <button
            onClick={() => {
              instance.current.increment();
              setForceRender(!forceRender);
            }}
          >
            {instance.current.counter}
          </button>
        );
      }

      const root = ReactDOM.createRoot(document.getElementById("root"));
      root.render(
        <>
          <App />
          <App />
        </>
      );

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.production.min.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
    ></script>
    <div id="root"></div>

edited May 12 '22 at 21:02

answered May 11 '22 at 20:43

Usiel

671
3
14

I know this solution. I am wondering if there any other beautiful way to do it. For example, in Vue or MobX it's pretty simple: I can make the class properties reactive and that's all. – nitrovatter May 11 '22 at 20:50
I've fixed the misspell. – nitrovatter May 11 '22 at 21:45
What is the point of the effect that does nothing? – Bergi May 11 '22 at 22:36
@nitrovatter If you're looking for MobX, [why not just use it](https://mobx.js.org/react-integration.html)? React does not provide any of this out of the box, if that is what your question was. – Bergi May 11 '22 at 22:38
@Bergi, I can't use MobX because it's a big dependency and I can't install it only for rare use-cases. – nitrovatter May 12 '22 at 19:27
@Bergi, what do you mean by "the effect that does nothing"? – nitrovatter May 12 '22 at 19:27
@nitrovatter `() => {}` literally does nothing. So why call `useEffect()`? Drop the line and the component will work exactly the same. – Bergi May 12 '22 at 19:37
Ah, I got it. It's the question to the answer's author. – nitrovatter May 12 '22 at 19:39

How to make a class value reactive in React

2 Answers2