Class member variables vs createRef to store mutable data in React class components

Question

For functional components it is encouraged to use useRef not just for access to dom elements but also to store some data that you do not want to trigger a rerender for.

For class components, I cannot find much information if using createRef to store data that you do not want to trigger a rerender for is a good idea or not. I understand that class member variables will work for primitive values but I see here that it might not be a good idea for non primitive values. So if you're storing an object for whatever reason, maybe an object of axios's cancellation tokens for each type of request? (The example is just for illustrative purpose)

Can I have a rule of thumb to always use createRef to store any data, primitive and non-primitive that I don't want to store in my state?

I have not seen any documentation approving createRef to store mutable data in this way, is it because there's some pitfalls/performance issues or weird behaviour with hot reloading, etc that I might be missing?

score 3 · Accepted Answer · answered Aug 27 '20 at 16:29

3

Can I have a rule of thumb to always use createRef to store any data, primitive and non-primitive that I don't want to store in my state?

In a class component, that's completely superfluous. A class component already has a mutable object: this. There's no need to create an additional one in the form of a ref.

answered Aug 27 '20 at 16:29

Nicholas Tower

72,740
7
86
98

I see, because it's not on the prototype, we explicitly set it in the constructor using `this.` Silly me, thanks! – Louis Christopher Aug 27 '20 at 16:32

Class member variables vs createRef to store mutable data in React class components

1 Answers1