React common skills

tools

https://ahooks.js.org/

basic component structure

const Task = () => {
  return <>task</>;
};

export default Task;

组件加载后就跳转 & useEffect 里 async function

import { useNavigate } from "react-router-dom";

function SSO() {
  const navigate = useNavigate();
  const { user, setUser } = useState();

  useEffect(() => {
    async function fetchData() {
      const response = await fetchAuthInfo(token);
      setUser(response.user);
      navigate(reponse.next_url);
    }
    fetchData();
  });
}

React Router

a very useful package. tutorial is very helpful.

如何获取 url request args

import { useSearchParams } from "react-router-dom";

const [searchParams] = useSearchParams();
const [carId] = useState(searchParams.get("car_id"));

drag and drop

https://docs.dndkit.com/

this package is also cool: https://github.com/react-grid-layout/react-draggable#draggable

resize

https://github.com/bokuweb/re-resizable

useEffect

  • 提示: React Hook useEffect has a missing dependency: ‘xxx’. Either include it or remove the dependency array react-hooks/exhaustive-deps

https://stackoverflow.com/questions/55840294/how-to-fix-missing-dependency-warning-when-using-useeffect-react-hook 在函数里加上:

// eslint-disable-next-line react-hooks/exhaustive-deps

split panel

https://github.com/johnwalley/allotment

input in modal auto focus when modal is shown

import { Modal } from "antd";

const App = () => {
  const [show, setShow] = useState(false);
  const inputRef = useRef(null);

  useEffect(() => {
    if (show) {
      setTimeout(() => {
        inputRef.current.focus();
      }, 100);
    }
  }, [show]);

  return (
    <>
      <button onClick={() => setShow(true)}>show modal</button>
      <Modal open={show}} destroyOnClose >
        <input ref={inputRef} />
      </Modal>
    </>
  );
};

startTransition

several setState could refresh page multi times, use startTransition to batch them into one refresh.

React.startTransition(() => {
  setCases(cases.slice());
  setTags(updatedTags);
  setCategories(updatedCategories);
});