useCurrentState

The useCurrentState hook combines the functionality of React's state and ref hooks. It provides state management along with a mutable ref that always contains the most up-to-date value of the state. This is particularly useful in scenarios where you need synchronous access to the current state value within asynchronous functions or event handlers.

Usage

First, you need to import the useCurrentState hook from the kitchn package.

import { useCurrentState } from "kitchn";

Example

Here is an example of how to use the useCurrentState hook in a component:

() => {
  const [count, setCount, countRef] = useCurrentState(0);

  const handleIncrement = () => {
    setCount((prev) => prev + 1);
    console.log("Current count (from ref):", countRef.current);
  };

  return (
    <Container gap={"small"}>
      <Text>Count: {count}</Text>
      <Button onClick={handleIncrement}>Increment</Button>
    </Container>
  );
};

() => {
  const [count, setCount, countRef] = useCurrentState(0);

  const handleIncrement = () => {
    setCount((prev) => prev + 1);
    console.log("Current count (from ref):", countRef.current);
  };

  return (
    <Container gap={"small"}>
      <Text>Count: {count}</Text>
      <Button onClick={handleIncrement}>Increment</Button>
    </Container>
  );
};

Parameters

The useCurrentState hook accepts the following parameter:

Return Value

The useCurrentState hook returns a tuple with the following elements: