What are the advantages or disadvantages to declaring static variables in a React functional ponents 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;

What are the advantages or disadvantages to declaring static variables in a React functional ponents 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;

• javascript
• reactjs
• static
• react-hooks

1 Answer 1

Refs are useful for mutable values bound to your ponent 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 ponent function, or as a constant in the outer scope:

const staticProp = "Hello, World!";

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