Cannot assign to read only property 'current' in React useRef

Question

i used react useRef in functional components to get link on html object and store it in Recoil atom. For example:

const Children = () => {
  const [refLink, setSrefLink] = useRecoilState(refLink)
  return <input ref={someRef}/>
}
const Parent = () => {
  const [refLink, setSrefLink] = useRecoilState(refLink)
  const someRef = useRef();
  setSomeRef(someRef)
  return <Children />;
}

export const refLink = atom({
    key: 'refLink',
    default: null ,
});

But when my Parent component ummounts I get error:

react-dom.development.js:20997 Uncaught TypeError: Cannot assign to read only property 'current' of object '#' in file reac-dom.development.js

I can't imagine what's the problem;

In your edited code, where does `someRef` come from in `Children`? (Also: ***Please*** try to avoid posting code that doesn't actually represent what you're actually using, then later changing it.) — T.J. Crowder, Feb 05 '21 at 17:54
Also: Storing a ref in state seems...wrong. Why do you think you want to do that? — T.J. Crowder, Feb 05 '21 at 17:57
@T.J.Crowder is any other way to tooltip for different elements? I want to just change links of anchor element to show tooltips in diferent components — dendroid, Feb 05 '21 at 18:04
That's a completely different question from the question you asked. I'd need much more context to answer it. I suggest posting it separately. But fundamentally: you just render different tootips based on data. No refs required. — T.J. Crowder, Feb 05 '21 at 18:11
@T.J.Crowder thanks, but tooltip position based on element postition. So i need to get current element position to bind it with tooltip — dendroid, Feb 05 '21 at 18:13
@dendroid - That's fine, you'd use a ref for that. But you wouldn't store it in state. — T.J. Crowder, Feb 05 '21 at 18:24

Nelu · Answer 1 · 2023-08-24T15:31:05.733

27

If you're getting this error in TypeScript, try listing null in the type annotation, which changes this from a RefObject to a MutableRefObject.

From

const myRef = useRef<MyType>(null)

To

const myRef = useRef<MyType | null>(null)

After doing so, reassigning current should not result in this error (e.g. myRef.current = null).

_Source

edited Aug 24 '23 at 15:31

answered Mar 22 '22 at 15:03

Nelu

16,644
10
80
88

3limin4t0r · Accepted Answer · 2021-02-05T18:32:44.310

The issue here is that atoms are are frozen by default (see the documentation) and a ref works by mutating the current property of an object.

You could prevent object freezing by passing dangerouslyAllowMutability: true.

export const refLinkState = atom({
    key: 'refLink',
    default: null ,
    dangerouslyAllowMutability: true,
});

Note that this will only update all subscribers if the ref itself is replaced by another ref. If a ref consumer changes the current property, subscribers will not re-render because the ref object is still the same object.

You could solve this by not using a ref, but by passing the ref value directly into your shared state.

// without dangerouslyAllowMutability
export const refLinkState = atom({
    key: 'refLink',
    default: null ,
});

const Children = () => {
  const [refLink, setRefLink] = useRecoilState(refLinkState);
  return <input ref={setRefLink} />;
};

In the above scenario we've completely eliminated refs and instead store the DOM element in the recoil state without the ref wrapper.

However like the forward refs documentation mentions:

React components hide their implementation details, including their rendered output. Other components using FancyButton usually will not need to obtain a ref to the inner button DOM element. This is good because it prevents components from relying on each other’s DOM structure too much.

Without knowing much about the structure and what exactly you want to achieve, you could for example extract the relevant data in Child and store that in a shared state. But there is probably a better solution if we had more context.

T.J. Crowder · Answer 3 · 2021-02-05T17:34:52.553

3

You can't just pass a ref as a prop.

Normally, a component hides its implementation so a parent component shouldn't be able to access a DOM element created by the child. But in the rare situation where you want to allow that on a component, you have to do so explicitly with forwardRef:

    const Children = React.forwardRef((props, someRef) => {
// −−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
      return <input ref={someRef}/>
    });
// −−^
    const Parent = () => {
      const someRef = useRef();
      return <Children ref={someRef} />;
    };

Cannot assign to read only property 'current' in React useRef

3 Answers3