DEV Community

Cover image for useDumbHooks
stereobooster
stereobooster

Posted on

useDumbHooks

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

Top comments (9)

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

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

Collapse
 
simoroshka profile image
Anna Simoroshka • Edited

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

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 • Edited

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
stereobooster

Ah classic