Category: React

Hooks contains our logic code in our React app.

We can create our own hooks and use hooks provided by other people.

In this article, we’ll look at some useful React hooks.

react-use

The react-use library is a big library with many handy hooks.

useTitle

The useTitle hook lets us set the title of a page.

We can use it by writing:

import React from "react";
import { useTitle } from "react-use";

export default function App() {
  useTitle("Hello world!");

  return <div className="App" />;
}

We pass the string to the hook to set the title.

usePermission

We can use the usePermission hook to query the permission status of browser APIs.

For instance, we can write:

import React from "react";
import { usePermission } from "react-use";

export default function App() {
  const state = usePermission({ name: "geolocation" });

  return <pre>{JSON.stringify(state, null, 2)}</pre>;
}

to get the location given the value of the name property of the object we pass into the hook.

useEffectOnce

The useEffectOnce let us run a side effect only once.

For instance, we can write:

import React from "react";
import { useEffectOnce } from "react-use";

export default function App() {
  useEffectOnce(() => {
    console.log("running");

    return () => {
      console.log("cleaning up");
    };
  });
  return <div />;
}

We have the useEffectOnce hook with a callback that runs when the component mounts.

The function that’s returned is run when the component unmounts.

This is handy for running any cleanup code.

useEvent

The useEvent hook lets us listen for events in our code.

For instance,e we can write:

import React from "react";
import { useList, useEvent } from "react-use";

export default function App() {
  const [list, { push, clear }] = useList();

  const onKeyDown = React.useCallback(({ key }) => {
    if (key === "x") {
      clear();
    }
    push(key);
  }, []);

  useEvent("keydown", onKeyDown);

  return (
    <div>
      <pre>{JSON.stringify(list, null, 2)}</pre>
    </div>
  );
}

We listen to the keydown event by passing in a callback.

The callback takes an event object with the key property for the key.

The useList hook returns the list which has the list.

push lets us push to list .

clear lets us clear the list .

If ‘x’ is pressed then the list is cleared.

Otherwise, we push the key that’s pressed to the list .

And we pass that into the 2nd argument of useEvent to run it on key down.

useLifecycles

The useLifecycles hook lets us pass in callback to run when the component mounts and unmounts.

We can use it by writing:

import React from "react";
import { useLifecycles } from "react-use";

export default function App() {
  useLifecycles(() => console.log("mounted"), () => console.log("unmounted"));

  return <div />;
}

The useLifecycke hook takes 2 arguments.

The first is the callback that runs when the component mounts.

The 2nd is the callback that runs when the component unmounts.

Conclusion

The react-use library lets us create lifecycle methods, change the title of the page, and query for browser permissions.

Hooks contains our logic code in our React app.

We can create our own hooks and use hooks provided by other people.

In this article, we’ll look at some useful React hooks.

react-use

The react-use library is a big library with many handy hooks.

useSpring

The useSpring hook lets us update a single numeric value over time.

To use it, we’ve to install by rebound library by running:

npm i rebound

For instance, we can use it by writing:

import React from "react";
import useSpring from "react-use/lib/useSpring";

export default function App() {
  const [target, setTarget] = React.useState(50);
  const value = useSpring(target);

  return (
    <div>
      {value}
      <br />
      <button onClick={() => setTarget(0)}>Set 0</button>
      <button onClick={() => setTarget(200)}>Set 200</button>
    </div>
  );
}

We have the target which is a numeric state.

setTarget lets us set the target state.

useSpring lets us jump to the given value with an animation.

This works when we pass in target to the hook.

useTimeout

The useTimeout hook lets us re-render the component after a specified number of milliseconds.

For example, we can use it by writing:

import React from "react";
import { useTimeout } from "react-use";

export default function App() {
  const [isReady, cancel] = useTimeout(1000);

  return (
    <div>
      {isReady() ? "after reload" : `before reload`}
      <br />
      {isReady() === false ? <button onClick={cancel}>Cancel</button> : ""}
    </div>
  );
}

The useTimeout function takes a duration before reloading in milliseconds.

isReady is a function that determines if the component is ready to reload.

If it is, then it returns false .

cancel is a function that lets us cancel the reloading.

useTimeoutFn

The useTimeoutFn ook lets us run a function after a given delay in milliseconds.

It doesn’t re-render the component.

Canceling is automatic.

The timeout is reset on delay change.

The reset function will cancel the previous timeout.

Timeout won’t reset on function changes.

For example, we can use it by writing:

import React from "react";
import { useTimeoutFn } from "react-use";

export default function App() {
  const [state, setState] = React.useState("before call");

function fn() {
    setState(`called at ${Date.now()}`);
  }

const [isReady, cancel, reset] = useTimeoutFn(fn, 5000);
  const cancelButtonClick = React.useCallback(() => {
    if (isReady() === false) {
      cancel();
      setState(`cancelled`);
    } else {
      reset();
      setState("before call");
    }
  }, []);

  const readyState = isReady();

  return (
    <div>
      <div>
        {readyState !== null ? "Function will be called" : "Timer cancelled"}
      </div>
      <button onClick={cancelButtonClick}>
        {readyState === false ? "cancel" : "restart"} timeout
      </button>
      <div>{state}</div>
    </div>
  );
}

We use the useTimeoutFn hook to create our timer to run a function after a given delay.

The delay is given in milliseconds in the 2nd argument.

We also created the cancelButtonClick function that uses the functions returned by useTimeoutFn .

cancel cancels the timer so the callback won’t run.

reset lets us reset the timer to start from the beginning.

isReady is a function that returns whether the callback is ready to run.

It’s ready if the callback hasn’t been called yet.

Conclusion

The react-use library comes with various useful hooks, including hooks that create timers and animate numbers.

Hooks contains our logic code in our React app.

We can create our own hooks and use hooks provided by other people.

In this article, we’ll look at some useful React hooks.

react-use

The react-use library is a big library with many handy hooks.

The useNetwork hook lets us detect the network type.

To us it, we can write:

import React from "react";
import { useNetwork } from "react-use";

export default function App() {
  const state = useNetwork();

  return <pre>{JSON.stringify(state, null, 2)}</pre>;
}

We call the useNetwork hook to return the network state.

The returned object has the online , downlink , effectiveType and rtt properties.

online has the online status.

downlink has internet downlink.

effectiveType has the effective network type.

rtt has the round trip delay.

The useOrientation hook lets us track the screen orientation of the user’s device.

To use it, we write:

import React from "react";
import { useOrientation } from "react-use";

export default function App() {
  const state = useOrientation();

  return <pre>{JSON.stringify(state, null, 2)}</pre>;
}

We use the useOrientation hook to return an object with the orientation data.

Then object has the angle , which is the angle of the screen.

It also has the type property, which is the screen orientation.

The usePageLeave hook lets us run a callback when the mouse leaves the page.

For instance, we can write:

import React from "react";
import { usePageLeave } from "react-use";

export default function App() {
  usePageLeave(() => console.log("left page"));

  return <></>;
}

The hook takes a callback that runs when our mouse leaves the page.

The useStartTyping hook lets us detect when we start typing.

It takes a callback that runs when we start typing.

For example, we can write:

import React from "react";
import { useStartTyping } from "react-use";

export default function App() {
  useStartTyping(() => console.log("Started typing"));

  return null;
}

The useWindowScroll hook lets us rerender on window scroll.

For example, we can write:

import React from "react";
import { useWindowScroll } from "react-use";

export default function App() {
  const { x, y } = useWindowScroll();

  return (
    <div>
      <div style={{ position: "fixed" }}>
        x: {x} y: {y}
      </div>
      {Array(1000)
        .fill()
        .map((_, i) => (
          <p key={i}>{i}</p>
        ))}
    </div>
  );
}

We have the useWindowScroll hook that returns the x and y coordinates of the scrolling.

The useScroll hook lets us watch for the scrolling of an element.

To use it, we can write:

import React from "react";
import { useScroll } from "react-use";

export default function App() {
  const scrollRef = React.useRef(null);
  const { x, y } = useScroll(scrollRef);

  return (
    <div ref={scrollRef} style={{ overflow: "scroll", height: 300 }}>
      <div style={{ position: "fixed" }}>
        x: {x} y: {y}
      </div>
      {Array(1000)
        .fill()
        .map((_, i) => (
          <p key={i}>{i}</p>
        ))}
    </div>
  );
}

We created a ref and pass that into the element that we want to watch the scrolling for.

We’ve to set the overflow style so that we scroll the element when there’s overflowing content.

Conclusion

The react-use package has hooks to listening to scrolling on the window and elements.

Also, we can watch for key presses.

Hooks contains our logic code in our React app.

We can create our own hooks and use hooks provided by other people.

In this article, we’ll look at some useful React hooks.

react-use

The react-use library is a big library with many handy hooks.

createMemo

The createMemo function creates a hook that has the state memoized.

Ir takes a function that returns a state.

For instance, we can write:

import React from "react";
import { createMemo } from "react-use";

const product = n => {
  let result = 1;
  for (let i = 1; i <= n; i++) {
    result *= i;
  }
  return result;
};

const useMemoProduct = createMemo(product);

export default function App() {
  const result = useMemoProduct(9);

  return <div>{result}</div>;
}

We have the product function which returns the product of n numbers multiplied together.

And we pass that into the createMemo function to return the useMemoProduct hook.

The hook takes the same arguments as the product function.

The hook returns the result which is the same as the product function.

Then we render the result in App .

useGetSetState

The useGetSetState hook lets us get and set the state, where the state may be an object.

To use it, we can write:

import React from "react";
import { useGetSetState } from "react-use";

export default function App() {
  const [get, setState] = useGetSetState({ count: 0 });
  const onClick = () => {
    setState({ count: get().count + 1 });
  };

  return <button onClick={onClick}>Clicked: {get().count}</button>;
}

We call the useGetSetState with an argument being the initial value.

It returns the get function to get the state value.

The setState the function sets the state.

Then we can call get to get the count property’s value.

usePrevious

We can get the previous value of a state with the usePrevious hook.

For instance, we can write:

import React from "react";
import { usePrevious } from "react-use";

export default function App() {
  const [count, setCount] = React.useState(0);
  const prevCount = usePrevious(count);

  return (
    <p>
      <button onClick={() => setCount(count + 1)}>increment</button>
      <button onClick={() => setCount(count - 1)}>decrement</button>
      <p>
        Now: {count}, before: {prevCount}
      </p>
    </p>
  );
}

We use the useState hook to return a state getter and setter function.

Then we pass the state into the usePrevious hook.

And then we get the current and previous value of count with count and prevCount respectively.

usePreviousDistinct

The usePreviousDistinct hook is like usePrevious , but the value updates only when the value actually changes.

This lets us get the previous distinct value instead of the previous value.

For instance, we can write:

import React from "react";
import { usePreviousDistinct, useCounter } from "react-use";

export default function App() {
  const [count, { inc: relatedInc }] = useCounter(0);
  const [anotherCount, { inc }] = useCounter(0);
  const prevCount = usePreviousDistinct(count);

  return (
    <p>
      Count: {count}, before count: {prevCount}
      <button onClick={() => relatedInc()}>Increment</button>
      Another count: {anotherCount}
      <button onClick={() => inc()}>Increment Unrelated</button>
    </p>
  );
}

We created 2 number states, count and anotherCount .

Then we use the increment functions that are returned with them.

And we pass the count into the usePreviousDistinct hook.

Conclusion

The react-use library lets us memoize results, get the previous value, and more with its hooks.

Hooks contains our logic code in our React app.

We can create our own hooks and use hooks provided by other people.

In this article, we’ll look at some useful React hooks.

react-use

The react-use library is a big library with many handy hooks.

The useLongPress hook lets us detect long presses of a key.

To use it, we can write:

import React from "react";
import { useLongPress } from "react-use";

export default function App() {
  const onLongPress = () => {
    console.log("long pressed");
  };

  const defaultOptions = {
    isPreventDefault: true,
    delay: 300
  };
  const longPressEvent = useLongPress(onLongPress, defaultOptions);

  return <button {...longPressEvent}>long press me</button>;
}

We have the useLongPress hook that takes a callback to run when the button us long pressed.

defaultOptions has the options for the hook.

isPreventDefault lets us prevent the default action.

delay is the delay before running the callback.

We pass the object that’s returned by the hook to the button.

The longPressEvent object has various event handlers, including onMouseDown , onTouchStart , onMouseUp , onMouseLeave and onTouchEnd .

The useMedia hook lets us detect the given media query in our React component.

To use it, we run:

import React from "react";
import { useMedia } from "react-use";

export default function App() {
  const isWide = useMedia("(min-width: 400px)");

  return <div>Screen is wide: {isWide ? "Yes" : "No"}</div>;
}

We use the useMedia hook with the media query we want to watch for in our component.

It returns a boolean that indicates whether the given media query is matched.

The useMediaDevices hook lets us track connected hardware devices.

For instance, we can use it by writing:

import React from "react";
import { useMediaDevices } from "react-use";

export default function App() {
  const state = useMediaDevices();

  return <pre>{JSON.stringify(state, null, 2)}</pre>;
}

The useMediaDevices hook returns an object with the devices property, which has the deviceId , groupId , kind , and label properties.

kind has the hardware type.

The useMotion hook lets us detect motion with the acceleration sensor.

For instance, we can write:

import React from "react";
import { useMotion } from "react-use";

export default function App() {
  const state = useMotion();

  return <pre>{JSON.stringify(state, null, 2)}</pre>;
}

We have the useMotion hook to return the data from the accelerometer.

It includes the acceleration , accelerationIncludingGravity , rotationRate , and interval .

They give us the acceleration and rotation rate of our device.

The useMouse lets us re-render on mouse position changes.

For instance, we can use it by writing:

import React from "react";
import { useMouse } from "react-use";

export default function App() {
  const ref = React.useRef(null);
  const mouseLocation = useMouse(ref);

  return (
    <div ref={ref}>
      <div>{JSON.stringify(mouseLocation)}</div>
    </div>
  );
}

The useMouse hook takes a ref for the element that we want to watch the mouse position for.

docX and docY has the mouse position in the whole document.

posX and posY has the position in the element.

elX and elY has the mouse position in the element.

elH and elW has the height and width of the element.

Conclusion

react-use has hooks to detect long mouse presses and mouse positions.