4 custom react hooks that will make your development easier

// Hook// Parameter is the boolean, with default "false" valueconst useToggle = (initialState = false) => {    // Initialize the state    const [state, setState] = useState(initialState);    // Define and memorize toggler function in case we pass down the comopnent,    // This function change the boolean value to it's opposite value    const toggle = useCallback(() => setState(state => !state), []);    return [state, toggle]}// Usagefunction App() {    // Call the hook which returns, current value and the toggler function    const [isTextChanged, setIsTextChanged] = useToggle();    return (      <button onClick={setIsTextChanged}>                {isTextChanged ? 'Toggled' : 'Click to Toggle'}            </button>    );}

// Hookconst useOnClickOutside = (ref, handler) => {  useEffect(    () => {      const listener = (event) => {        // Do nothing if clicking ref's element or descendent elements        if (!ref.current || ref.current.contains(event.target)) {          return;        }        handler(event);      };      document.addEventListener("mousedown", listener);      document.addEventListener("touchstart", listener);      return () => {        document.removeEventListener("mousedown", listener);        document.removeEventListener("touchstart", listener);      };    },    [ref, handler]  );}

// Usagefunction App() {  // Create a ref that we add to the element for which we want to detect outside clicks  const ref = useRef();  // State for our modal  const [isModalOpen, setModalOpen] = useState(false);  // Call hook passing in the ref and a function to call on outside click  useOnClickOutside(ref, () => setModalOpen(false));  return (    <div>      {isModalOpen ? (        <div ref={ref}>           Hey, I'm a modal. Click anywhere outside of me to close.        </div>      ) : (        <button onClick={() => setModalOpen(true)}>Open Modal</button>      )}    </div>  );}

// Hookconst useSubmit = submitFunction => {  const [loading, setLoading] = useState(false);  const [error, setError] = useState(null);    const handleSubmit = async () => {    try {      setLoading(true);      setError(null);      await submitFunction();    } catch (error) {      setError(error);    } finally {      setLoading(false);    }  };  return [handleSubmit, loading, error];};

// Usagefunction App() {    const mySubmitFunction = () => {      return new Promise((resolve, reject) => {        setTimeout(() => {                resolve("Timeout Finished")        }, 2000);      });    };    const [handleSubmit, loading, error] = useSubmit(mySubmitFunction);    return (        <div className="App">          <button onClick={handleSubmit} disabled={loading}>            {!loading ? "Click me" : "Loading..."}          </button>          {error && <div>{error}</div>}        </div>      );}

// Hookconst useMediaQuery = (query = "(min-width: 576px)") => {  const [matches, setMatches] = useState(false);  useEffect(() => {    const media = window.matchMedia(query);    if (media.matches !== matches) {      setMatches(media.matches);    }    const listener = () => {      setMatches(media.matches);    };    media.addListener(listener);    return () => media.removeListener(listener);  }, [matches, query]);  return matches;}// Usageconst isTablet = useMediaQuery("(max-width: 1200px)");