useSharedState

test.tsx

import useSWR from "swr";

const useSharedState = (key: string, fallbackData: any) => {
  const { data, mutate } = useSWR(key, { fallbackData });
  return [data, mutate];
};

const useCounter = () => {
  const [count, setCount] = useSharedState("counter", 0);
  const handleIncrement = () => {
    setCount(count + 1);
  };
  return { count, handleIncrement };
};

const useText = () => {
  const [text, setText] = useSharedState("text", "");
  const handleChange = (e) => {
    setText(e.target.value);
  };
  return { text, handleChange };
};

const Test = () => {
  return (
    <>
      <ChildrenA />
      <ChildrenB />
    </>
  );
};

const ChildrenA = () => {
  const { text } = useText();
  return <div>{text}</div>;
  // const { count } = useCounter();
  // return <div className="bg-red-800">{count}</div>;
};

const ChildrenB = () => {
  const { text, handleChange } = useText();
  return (
    <div>
      <div>{text}</div>
      <input type="text" value={text} onChange={handleChange} />
    </div>
  );

  // const { count, handleIncrement } = useCounter();
  // return (
  //   <div className="bg-blue-800">
  //     <div>{count}</div>
  //     <button onClick={handleIncrement}>Increment</button>
  //   </div>
  // );
};

export default Test;

useSharedState.ts

import useSWR from "swr";
import type { KeyedMutator } from "swr/dist/types";

export const useSharedState = <T extends any>(key: string, fallbackData?: T) => {
  const { data, mutate } = useSWR(key, { fallbackData });
  return [data, mutate] as [typeof fallbackData, KeyedMutator<typeof fallbackData>];
};

test.tsxは講座で使用したコード
useSharedState.tsはTypeScriptで使うために抜き出したものです