Create react custom hook

July 2, 2022

Please tell me if I can put this functionality in a hook and if so, how to do it? I have marked "<==" lines that need to be moved to the hook. It’s just adding and removing a class after clicking on an element.

 const Number: FC<Number> = ({ number }) => {
        const dispatch = useAppDispatch()
        const [isClicked, setIsClicked] = useState<boolean>(false) // <==
    
        const numberButtonHandler = () => {
            dispatch(addNumber(number))
    
            setIsClicked(true) // <==
            setTimeout(() => { // <==
                setIsClicked(false) // <==
            }, 100) // <==
        }
    
        return (
            <div
                className={`calc-button number ${isClicked ? 'calc-button--clicked' : ''}`}
                onClick={numberButtonHandler}>
                <p className="number__value">{number}</p>
            </div>
        )
    }

>Solution :

Yes, You can create a custom hook which will takeinitalValue and which will return an array of isClicked and a function which will change the state as. Please change the name that looks meaningful to you.

codesandbox demo

function useCustomHook(initialState: boolean): [boolean, () => void] {
  const [isClicked, setIsClicked] = useState<boolean>(initialState);

  const changeState = () => {
    setIsClicked(true);
    setTimeout(() => {
      setIsClicked(false);
    }, 100);
  };

  return [isClicked, changeState];
}

and use it as:

const dispatch = useAppDispatch();
  const [isClicked, changeState] = useCustomHook(false);

  const numberButtonHandler = () => {
    dispatch(addNumber(number));
    changeState();
  };