useRef() causes TS2322: Type 'number' is not assignable to type 'undefined'

Question

I am trying to use useEffect and useRef() to get the latest value of my counter as well as compare to the previous value so that I know if I need to call the addValues or removeValues function.

I followed the directions here I'm working with Typescript and when I set prevSubjectAddressCounterRef.current = subjectAddressCounter; I get the error TS2322: Type 'number' is not assignable to type 'undefined'.

How can I fix this error and ensure that when I update the count on the state that I am working with the latest value?

Please see the relevant code below.

const FormGroup = prop => {
  const [subjectAddressCounter, setSubjectAddressCounter] = useState(0); // changing to 0 || undefined causes this not to function correctly because you can't add to undefined


  const prevSubjectAddressCounterRef = useRef();
  useEffect(() => {
    prevSubjectAddressCounterRef.current = subjectAddressCounter; // this causes Typescript error above

    if (prevSubjectAddressCounterRef.current < subjectAddressCounter) {
      // call function to addValues
      addValues();
    }

    if (prevSubjectAddressCounterRef.current === subjectAddressCounter) {
      // call function to removeValues
      removeValues();
    }


  }, [subjectAddressCounter]);


  const addSection = section => {
    if (section.section === SectionTitle.subjectAddress) {
      setSubjectAddressCounter(prevCount => prevCount + 1);
    }
  };

  const removeSection = section => {
    if (section.section === SectionTitle.subjectAddress) {
      setSubjectAddressCounter(prevCount => prevCount - 1);
    }
  };

return (
   ... 
   button onClick={() => addSection(form)}

   button onClick={() => removeSection(form)}

 )

}

Quittance

Answer 1

I believe you need to pass the initial value and define the type of the const because undefined is not equal to number, that's why is throwing the error Type 'number' is not assignable to type 'undefined'. I think it should look like this:

const prevSubjectAddressCounterRef = useRef<number>(0);

Lithopone

Thanks for your answer, but this doesn't fix my primary issue. Please see the update above. – Quittance

Answer 2

Start with this line and hover over the const name.

const prevSubjectAddressCounterRef = useRef();

TypeScript then shows what the type is.

It has <undefined> because there is no value in the parenthesis when you initialized with = useRef() which in this case is completely normal and expected.

Whenever you initialize a variable to equal useRef(), you are creating an object that has only one property, current.

Looking at the screenshot above (taken from React's type declaration file), you can see it takes one argument and this argument becomes the type for current.

When you try to initialize .current and get the error it's because you are contradicting yourself, at least according to TypeScript.

I want this object which I have specifically said should have current: undefined to have current: 0.

This is the line where you said that (note that subjectAddressCounter was set to 0 at line 2 prior to this line).

prevSubjectAddressCounterRef.current = subjectAddressCounter;

So TypeScript says, you can't assign type number to type undefined.

The solution is to provide a type for this line.

// before
const prevSubjectAddressCounterRef = useRef();

// after
const prevSubjectAddressCounterRef: MutableRefObject<number | undefined> = useRef();

Alternatively, the solution provided by @DarthCoder also works. Not sure why it didn't work in your case.

Dvinsk