use-refimmer
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.2 • Public • Published

    use-refimmer

    A hook to use immer with React.useRef.

    Installation

    npm install immer use-refimmer

    API

    useRefImmer

    useRefImmer(initialState) 可以帮助你缓存当前的值

    Example: https://codesandbox.io/s/react-typescript-3ls8r?fontsize=14&hidenavigation=1&theme=dark

    import React from "react";
    import { useRefImmer } from "use-refimmer";
     
    function App() {
      const [usersRef, setUsers] = useRefImmer([]);
     
      React.useEffect(() => {
        const handleClick = () => {
          const ramdomId = parseInt(String(Math.random() * 10), 10);
          const mockPerson = {
            name: "foo" + ramdomId,
            id: ramdomId
          };
     
          const index = usersRef.current.findIndex(
            (user: UserType) => user.id === mockPerson.id
          );
          if (index < 0) {
            setUsers((draft: Array<UserType>) => {
              draft.push(mockPerson);
            });
          } else {
            setUsers((draft: Array<UserType>) => {
              draft[index] = mockPerson;
            });
          }
        };
        const btn = document.getElementById("btn2");
        if (btn) {
          btn.addEventListener("click", handleClick);
        }
      },[]);
     
      return (
        <div>
          <button id="btn2">Add user</button>
          {usersRef.current.map((item: UserType) => (
            <div id={String(item.id)} key={item.id}>
              {item.name}
            </div>
          ))}
        </div>
      );
    }

    Install

    npm i use-refimmer

    DownloadsWeekly Downloads

    0

    Version

    0.0.2

    License

    MIT

    Unpacked Size

    7.44 kB

    Total Files

    11

    Last publish

    Collaborators

    • zaynex