Update June 2021:

Use the NPM module react-usestateref to get always the latest state value. It's fully backward compatible with React useState API.

Example code how to use it:

import useState from 'react-usestateref';

const [count, setCount, counterRef] = useState(0);

console.log(couterRef.current); // it will always have the latest state value
setCount(20);
console.log(counterRef.current);

The NPM package react-useStateRef lets you access the latest state (like ref), by using useState.

Update Dec 2020:

To solve exactly this issue I have created a react module for that. react-usestateref (React useStateRef). E.g. of use:

var [state, setState, ref] = useState(0);

It's works exaclty like useState but in addition, it gives you the current state under ref.current

Learn more:

• https://www.npmjs.com/package/react-usestateref

Original Answer

You can get the latest value by using the setState

For example:

var [state, setState] = useState(defaultValue);

useEffect(() => {
   var updatedState;
   setState(currentState => { // Do not change the state by getting the updated state
      updateState = currentState;
      return currentState;
   })
   alert(updateState); // the current state.
})

For your scenario (where you cannot keep creating new callbacks and passing them to your 3rd party library), you can use useRef to keep a mutable object with the current state. Like so:

function Card(title) {
  const [count, setCount] = React.useState(0)
  const [callbackSetup, setCallbackSetup] = React.useState(false)
  const stateRef = useRef();

  // make stateRef always have the current count
  // your "fixed" callbacks can refer to this object whenever
  // they need the current value.  Note: the callbacks will not
  // be reactive - they will not re-run the instant state changes,
  // but they *will* see the current value whenever they do run
  stateRef.current = count;

  function setupConsoleCallback(callback) {
    console.log("Setting up callback")
    setInterval(callback, 3000)
  }

  function clickHandler() {
    setCount(count+1);
    if (!callbackSetup) {
      setupConsoleCallback(() => {console.log(`Count is: ${stateRef.current}`)})
      setCallbackSetup(true)
    }
  }


  return (<div>
      Active count {count} <br/>
      <button onClick={clickHandler}>Increment</button>
    </div>);

}

Your callback can refer to the mutable object to "read" the current state. It will capture the mutable object in its closure, and every render the mutable object will be updated with the current state value.

You can access the latest state in setState callback. But the intention is not clear, we never want to setState in this case, it may confuse other people when they read your code. So you may want to wrap it in another hook that can express what you want better

function useExtendedState<T>(initialState: T) {
  const [state, setState] = React.useState<T>(initialState);
  const getLatestState = () => {
    return new Promise<T>((resolve, reject) => {
      setState((s) => {
        resolve(s);
        return s;
      });
    });
  };

  return [state, setState, getLatestState] as const;
}

Usage

const [counter, setCounter, getCounter] = useExtendedState(0);

...

getCounter().then((counter) => /* ... */)

// you can also use await in async callback
const counter = await getCounter();

Live Demo

I encountered a similar bug trying to do exactly the same thing you're doing in your example - using a setInterval on a callback that references props or state from a React component.

Hopefully I can add to the good answers already here by coming at the problem from a slightly different direction - the realisation that it's not even a React problem, but a plain old Javascript problem.

I think what catches one out here is thinking in terms of the React hooks model, where the state variable, just a local variable after all, can be treated as though it's stateful within the context of the React component. You can be sure that at runtime, the value of the variable will always be whatever React is holding under the hood for that particular piece of state.

However, as soon as you break out of the React component context - using the variable in a function inside a setInterval for instance, the abstraction breaks and you're back to the truth that that state variable really is just a local variable holding a value.

The abstraction allows you to write code as if the value at runtime will always reflect what's in state. In the context of React, this is the case, because what happens is whenever you set the state the entire function runs again and the value of the variable is set by React to whatever the updated state value is. Inside the callback, however, no such thing happens - that variable doesn't magically update to reflect the underlying React state value at call time. It just is what it is when the callback was defined (in this case 0), and never changes.

Here's where we get to the solution: if the value pointed to by that local variable is in fact a reference to a mutable object, then things change. The value (which is the reference) remains constant on the stack, but the mutable value(s) referenced by it on the heap can be changed.

This is why the technique in the accepted answer works - a React ref provides exactly such a reference to a mutable object. But I think it's really important to emphasise that the 'React' part of this is just a coincidence. The solution, like the problem, has nothing to do with React per-se, it's just that a React ref happens to be one way to get a reference to a mutable object.

You can also use, for instance, a plain Javascript class, holding its reference in React state. To be clear, I'm not suggesting this is a better solution or even advisable (it probably isn't!) but just using it to illustrate the point that there is no 'React' aspect to this solution - it's just Javascript:

class Count {
  constructor (val) { this.val = val }
  get () { return this.val }
  
  update (val) {
    this.val += val
    return this
  }
}

function Card(title) {
  const [count, setCount] = React.useState(new Count(0))
  const [callbackSetup, setCallbackSetup] = React.useState(false)
  
  function setupConsoleCallback(callback) {
    console.log("Setting up callback")
    setInterval(callback, 3000)
  }

  function clickHandler() {
    setCount(count.update(1));
    if (!callbackSetup) {
      setupConsoleCallback(() => {console.log(`Count is: ${count.get()}`)})
      setCallbackSetup(true)
    }
  }
  
  
  return (
    <div>
      Active count {count.get()} <br/>
      <button onClick={clickHandler}>Increment</button>
    </div>
  )
}

const el = document.querySelector("#root");
ReactDOM.render(<Card title='Example Component' />, el);

You can see there that simply by having the state point to a reference, that doesn't change, and mutating the underlying values that the reference points to, you get the behaviour you're after both in the setInterval closure and in the React component.

Again, this is not idiomatic React, but just illustrates the point about references being the ultimate issue here. Hope it's helpful!