loading...
Cover image for useDumbHooks

useDumbHooks

stereobooster profile image stereobooster ・1 min read

This article inspired by Sara Vieira's talk "Build dumb sh*t".

Best way to learn something is to use it, to play with it (primitive interpretation of Piaget's constructivism theory), right? But don't build yet another todo app, because it is boring, and when something boring it is harder to learn, you need forcefully push it in your brain. Instead, find some fun task in which you can practice new technology along the way. Build something fun and useless.

So I want to get a better understanding of React's hooks and I wonder what is the most absurd idea for the hook you can come up with?

I already got some ideas:

  • useFaviconProgress - show progress in favicon, see faviconx
  • useProgressBar - show youtube-like progress bar, see nprogress
  • useGreenlet - run function in a web worker, see greenlet
  • usePopup
  • useSocket - subscribe to websocket

Build fun, dumb, simple hooks. Share your ideas and/or implementations in comments.

Photo by Cristina Gottardi on Unsplash

Discussion

pic
Editor guide
Collapse
simoroshka profile image
Anna Simoroshka

I wrote one dumb hook (extracted from the code, actually), useClickAway, which detects a click outside of the element (so I could hide the dropdown menu, for example). It just was nicer to have it separated instead of that code being copypasted around in different components.

Collapse
stereobooster profile image
stereobooster Author

Nice. Do you have it as open source repo or a gist or a codesandbox?

Collapse
simoroshka profile image
Anna Simoroshka

Well, here it is.

import { useEffect } from 'react';

export default function useClickAway(onClickAway, ref) {
  useEffect(() => {
    document.addEventListener('mousedown', handleClick);
    return () => {
      document.removeEventListener('mousedown', handleClick);
    };
  }, []);

  function handleClick(event) {
    if (ref.current && !ref.current.contains(event.target)) onClickAway();
  }
}

Thread Thread
simoroshka profile image
Anna Simoroshka

This is what I did before in the component and how it's now:

componentDidMount() {
    document.addEventListener('mousedown', this.handleClickOutside);
  }

  componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClickOutside);
  }

  setWrapperRef = node => {
    this.wrapperRef = node;
  };

  handleClickOutside = event => {
    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
      this.props.onClickAway();
    }
  };

vs

const wrapperRef = useRef();
useClickAway(props.onClickAway, wrapperRef);
Collapse
stereobooster profile image
stereobooster Author

Wrote today

const useUniqueId = () => {
  const id = React.useRef<string>(null);
  if (!id.current) id.current = nanoid();
  return id.current;
}
Collapse
alutom profile image
alutom
const useUniqueId = () => React.useState(nanoid)[0];
Collapse
stereobooster profile image
stereobooster Author

This is quite smart and more idiomatic than my version. Write more

Collapse
gabe_ragland profile image
Gabe Ragland

useStackOverflow(question) - Posts your question to StackOverflow, runs the first answer through eval and then returns the result.

Collapse
stereobooster profile image