React Hooks Static Variables: Object Property vs useRef()

Question

What are the advantages or disadvantages to declaring static variables in a React functional components within a useRef() hook vs. simply declaring them as an object property.

useRef Approach:

import React, { useRef } from "react";

const MyComponent = () => {

  const staticProp = useRef("Hello, World!");

  return (
    <div>{staticProp.current}</div>
  )
}

export default MyComponent;

Object Property Approach:

import React from "react";

const MyComponent = () => {

  return (
    <div>{MyComponent.staticPro}</div>
  )
}

MyComponent.staticProp = "Hello, World!";

export default MyComponent;

Pierre V. · Accepted Answer · 2019-09-30 22:39:48Z

8

Refs are useful for mutable values bound to your component instances. They are similar to instance variables. If the variable is supposed to be static, you don't need refs. You can declare it as a property of your component function, or as a constant in the outer scope:

const staticProp = "Hello, World!";

const MyComponent = () => {
  return (
    <div>{staticProp}</div>
  )
}

answered Sep 30, 2019 at 22:39

Pierre V.

1,6151 gold badge11 silver badges14 bronze badges

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

Collectives™ on Stack Overflow

React Hooks Static Variables: Object Property vs useRef()

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related