Make a React component rerender when data class property change

Question

In my Typescript app, there's a class that represents some data. This class is being shared end to end (both front-and-back ends use it to structure the data). It has a property named items which is an array of numbers.

class Data {
  constructor() {
    this.items = [0];
  }

  addItem() {
    this.items = [...this.items, this.items.length];
  }
}

I'm trying to render those numbers in my component, but since modifying the class instance won't cause a re-render, I have to "force rerender" to make the new items values render:

const INSTANCE = new Data();

function ItemsDisplay() {
  const forceUpdate = useUpdate(); // from react-use

  useEffect(() => {
    const interval = setInterval(() => {
      INSTANCE.addItem();
      forceUpdate(); // make it work
    }, 2000);

    return () => clearInterval(interval);
  }, []);

  return (
    
      with class:
      {INSTANCE.items.map(item => {item})}
    
  );
}

While this works, it has one major drawback: addItem() is not the only modification done to INSTANCE; This class has actually around 10 to 15 properties that represent different data parts. So, doing forceUpdate() wherever a modification happens is a nightmare. Not no mention, if this instance will be modified outside the component, I won't be able to forceUpdate() to sync the change with the component.

Using useState([]) to represent items will solve this issue, but as I said Data has a lot of properties, so as some functions. That's another nightmare.

I would like to know what's the best way of rendering data from a class instance, without rerender hacks or unpacking the whole instance into a local component state.

Thanks!

Here's a Codesandbox demo that shows the differences between using a class and a local state.

user_1641941 · Answer

Here is an example of how you can make Data instance observable and use Effect in your components to observe changes in Data instance items:

const { useState, useEffect } = React;
class Data {
  constructor() {
    this.data = {
      users: [],
      products: [],
    };
    this.listeners = [];
  }

  addItem(type, newItem) {
    this.data[type] = [...this.data[type], newItem];
    //notify all listeners that something has been changed
    this.notify();
  }
  addUser(user) {
    this.addItem('users', user);
  }
  addProduct(product) {
    this.addItem('products', product);
  }
  reset = () => {
    this.data.users = [];
    this.data.products = [];
    this.notify();
  };
  notify() {
    this.listeners.forEach((l) => l(this.data));
  }
  addListener = (fn) => {
    this.listeners.push(fn);
    //return the remove listener function
    return () =>
      (this.listeners = this.listeners.filter(
        (l) => l !== fn
      ));
  };
}
const instance = new Data();
let counter = 0;
setInterval(() => {
  if (counter < 10) {
    if (counter % 2) {
      instance.addUser({ userName: counter });
    } else {
      instance.addProduct({ productId: counter });
    }
    counter++;
  }
}, 500);
//custom hook to use instance
const useInstance = (instance, fn = (id) => id) => {
  const [items, setItems] = useState(fn(instance.data));
  useEffect(
    () =>
      instance.addListener((items) => setItems(fn(items))),
    [instance, fn]
  );
  return items;
};
const getUsers = (data) => data.users;
const getProducts = (data) => data.products;
const Users = () => {
  const users = useInstance(instance, getUsers);
  return {JSON.stringify(users)};
};
const Products = () => {
  const products = useInstance(instance, getProducts);
  return {JSON.stringify(products)};
};
const App = () => {
  const reset = () => {
    instance.reset();
    counter = 0;
  };
  return (
    
      
      
        users:
        
      
      
        products:
        
      
    
  );
};
ReactDOM.render(, document.getElementById('root'));

Make a React component rerender when data class property change

1 Answers