tjinlag

const MyComponent = (props) => {
  /* render using props */
}

const areEqual = (prevProps, nextProps) => {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */

tjinlag

const MemoizedComponent = React.memo(MyComponent);

// In this case, the MemoizedComponent will re-render when the App re-render.
// Because when the app re-render, the function handleClick will have the new reference.
const App = () => {
  const handleClick = () => {
    // logic when click ...
  }
  
  return (

tjinlag

const { useState } from "react";

const App = () => {
  const [value, setValue] = useState("");
  const handleChange = (text) => {
    console.log('input value changed: ', text);
    setValue(text);
  }

  return (

tjinlag

export const useToastContent = (timeout = 2e3) => {
  const [content, setContent] = useState('');
  const timer = useRef();
  useEffect(() => {
    return () => {
      if (timer && timer.current) {
        clearTimeout(timer.current);
      }
    }
  }, []);

tjinlag

export const useDisableScroll = () => {
  useEffect(() => {
    const { body } = document;
    const bodyStyle = { ...body.style };

    body.style.height = '100%';
    body.style.overflow = 'hidden';
    body.style.position = 'relative';

    return () => {

tjinlag

const DEFAULT_TITLE = "Your default title";

const useTitle = (title) => {
  useEffect(() => {
    document.title = title || DEFAULT_TITLE;
  }, [title]);
};

export default useTitle;

tjinlag

const isFullUrl = (url = "") => url.match(/^\w+:\/\//);

const useNavigate = () => {
  const history = useHistory();
  const navigateTo = (url: string, { replace = false } = {} ) => {
    if (isFullUrl(url)) {
      window.location.href = url;
      return;
    }

tjinlag

import { useState, useEffect } from "react";

const useOnlineStatus = () => {
  const [online, setOnline] = useState(true);

  useEffect(() => {
    const goOnline = () => setOnline(true);
    const goOffline = () => setOnline(false);

    window.addEventListener('online', goOnline);

tjinlag

const useCountDown = (timeout = 59) => {
  const [expiredTime] = useState(Math.round(Date.now() / 1e3) + timeout);
  const [remainTime, setRemainTime] = useState(expiredTime - Math.round(Date.now() / 1e3));
  useEffect(() => {
    const timer = setTimeout(() => {
      const diff = expiredTime - Math.round(Date.now() / 1e3);

      if (diff < 0) {
        if (remainTime !== 0) {
          setRemainTime(0);

tjinlag

const useTimers = () => {
  const timers = useRef<any[]>([]);
  useEffect(() => {
    return () => {
      // eslint-disable-next-line
      timers.current.map((timer) => {
        if (timer) {
          clearTimeout(timer);
        }
        return null;