use-actual-state v1.2.3

useActualState

The React hook you didn't know you need (but you do!).

useActualState is the best replacement for useState. It creates a state that will always refer to it's actual value, no matter where it's being used.

Benefits:

No more need for the setState function

Just set the state value like you would do for a common variable. Example:

import { useActualState } from "use-actual-state";

function Count() {
  const count = useActualState(0);

  function plusOne() {
    count.s++;
  }

  return (
    <button onClick={plusOne}>
      count: {count.s}
    </button>
  );
}

No more meaningless dependency arrays.

The dependency array is used to guarantee that the wrapped function will always have access to updated state values. But this comes with some issues. You'll probably have to refactor a significant part of your code to avoid problems with useEffect calls. With useActualState you can now use the dependency array for tracking only the changes you really wish to track. Example:

import { useActualState } from "use-actual-state";
import { useCallback, useEffect } from "react";

function Items() {
  const items = useActualState([]);
  const status = useActualState("LOADING");

  const fetchData = useCallback(async () => {
    const { json } = await fetch("https://url-to-fetch.com");
    const item = await json();
    items.s.push(item);
    status.s = "LOADED";
  }, []); // No need to include "items" 😍.

  useEffect(() => {
    if (status.s === "LOADING") {
      fetchData();
    }
  }, [status.s]); // No need to include "fetchData" 😍. We can use the dependency array to track only "status" changes

  return (
    status.s === "LOADED" && (
      <>
        <button onClick={() => status.s = "LOADING"}>load more</button>
        items: {items.s}
      </>
    )
  );
}

No more unnecessary useCallback.

Since the state will always refer to it's actual value, you can avoid using useCallback for most situations.

import { useActualState } from "use-actual-state";
import { useEffect } from "react";

function Items() {
  const items = useActualState([]);

  async function fetchData() { // no need to wrap this function in useCallback 😍
    const { json } = await fetch("https://url-to-fetch.com");
    const item = await json();
    items.s.push(item)
  }

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <>items: {items.s}</>
  );
}

Features:

Built-in Toggle functionality.

Use state.toggle() to easily toggle the value of state.s. It works as a shorthand for state.s = !state.s.

import { useActualState } from "use-actual-state";

function Count() {
  const state = useActualState(true);

  function handleToggle() {
    state.toggle(); // Shorthand for `state.s = !state.s`
  }

  return (
    <button onClick={handleToggle}>
      bool value: {state.s}
    </button>
  );
}