JIYIK CN >

When we initialize ref with null value and do not include null in its type, an error "Cannot assign to 'current' because it is a read-only property" occurs. To resolve the error, include null in the type of ref, for example const ref = useRef<string | null>(null).

Here is an example of what goes wrong.

import {useEffect, useRef} from 'react';

const App = () => {
  const ref = useRef<string>(null);

  useEffect(() => {
    // ⛔️ Error: Cannot assign to 'current' because it is a read-only property.ts(2540)
    ref.current = 'hello';
  }, []);

  return (
    <div>
      <h2>hello world</h2>
    </div>
  );
};

export default App;

The following is an error result

The problem is that when we pass null as the initial value to the useRef hook and null is not included in the type of the generic passed to the hook, we create an immutable ref object.

To fix this error, we have to include null in the type passed to the hook generic.

import {useEffect, useRef} from 'react';

const App = () => {
  // 👇️ 在 ref 的类型中包含 null
  const ref = useRef<string | null>(null);

  useEffect(() => {
    ref.current = 'hello';
  }, []);

  return (
    <div>
      <h2>hello world</h2>
    </div>
  );
};

export default App;

We use a union type to include null in the type of ref, which makes it a mutable ref object.

In the current example, ref is of type string or null, and can be assigned a value of either type to its current property.

The same is true if our ref points to a DOM element. We have to type the hook const ref = useRef<HTMLElement | null>(null)if we need to change the value of the current property of the ref.

Note that you don't have to include null in the type of ref if you're not assigning directly to its current property.

import {useEffect, useRef} from 'react';

const App = () => {
  const ref = useRef<HTMLInputElement>(null);

  useEffect(() => {
    ref.current?.focus();
  }, []);

  return (
    <div>
      <input ref={ref} type="text" defaultValue="" />
    </div>
  );
};

export default App;

The ref in the example is used to focus the input element. Because its .currentattributes have no values ​​assigned to them, there is no need to include null in its type.