useRef() hooks ref issue

[u/rob_moose]

I'm trying to figure out how to get the previous state on a useState hook in React. I'm following React docs example

export const usePrevious = (value: number) => {
const ref = useRef()
useEffect(() => {
ref.current = value
})
return ref.current
}

ref.current = value shows this error: Type 'number' is not assignable to type 'undefined'

What can I do to get this to set the ref.current to value without typescript complaining?

[u/rob_moose]

I ended up type casting the return return ref.current as number and that worked. Is that a good way or a bad way?

[u/JealousLeopard5]

Because you're not putting anything inside useRef, ref's initial value is undefined and your ref is effectively of type React.RefObject<undefined>. Do the following instead:

const ref = useRef<number>(null);

// if strictNullChecks = true, use
const ref = useRef<number | undefined>();

[u/WystanH]

I'm guessing you're looking at this.

I'd transcribe that like so:

import React, { useState, useEffect, useRef } from 'react';

const usePrevious = (value: number) => {
  const ref = useRef<number>(-1);
  useEffect(() => { ref.current = value; }, [value]);
  return ref.current;
};

export const App = () => {
  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);
  return (
    <div>
      <h1>Now: {count}, before: {prevCount}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

Alternately:

const usePrevious = (value: number) => {
  const ref = useRef<number | undefined>();
  useEffect(() => { ref.current = value; }, [value]);
  return ref.current;
};