Use React ref to store a class instance?

Question

The most common use of React Refs is to store a DOM element. However, the React documentation suggests that refs can be used to store any immutable value, so I was wondering if anyone has been able to implement an actual instance of a class and assigned it to a ref. E.g.:

// Example class
class MyBlueCar {
  constructor(options) {

  }
  ...
}

// React component
import { MyBlueCar } from "./mybluecar.js";

function StartCar() {
  const startEngineRef = useRef();

  useEffect(() => {
    const myBlueCar = new MyBlueCar();
    startEngineRef.startEngine = myBlueCar
  }, []);
}

However I get a startEngineRef is not extensible error.

Federkun · Accepted Answer · 2021-02-09 19:36:54Z

5

The ref, startEngineRef, is read only. startEngineRef.current is mutable.

startEngineRef.current.startEngine = myBlueCar

In your case, you may consider

const startEngine = React.useMemo(() => new MyBlueCar(), [])

if you just want to have a single instance for the whole life cycle of the component.

answered Feb 9, 2021 at 19:36

Federkun

37.2k8 gold badges82 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Use React ref to store a class instance?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related