You can use useReducer to simulate the old this.setState({}) API of class components.

const reducer = (state, newState) => ({

const Example = () => {
  const [state, setState] = useReducer(reducer, initialState)

    thisKey: 'will be merged into state',

  return <div />

This ideas was stolen from this article:

useReducer as a simple state machine

I love this simple trick from Kyle Shevlin.

useStaticQuery & useSiteMetadata

I really like this idea of wrapping up common queries in a Gatsby site into custom hooks that can be used to access things like your site’s metadata.


In JavaScript, you can use the textContent property of a node to get the text representation of the node and all of its descendent nodes. This isn’t possible with a tree of React components, but you can fake it using a ref:

const node = useRef(null)
const [textContent, setTextContent] = useState(null)

useEffect(() => {
}, [node])

return (
  <div ref={node}>
    This is text with a <a href='/'>link inside it</a>.

In the code above, textContent is equal to the string This is text with a link inside it. This pattern could be very easily wrapped up into a custom hook:

const useTextContent = (initial) => {
  const [textContent, setTextContent] = useState(initial)

  const ref = useCallback((node) => {
    if (node !== null) {
  }, [])

  ref.current = textContent
  return ref

const textContainer = useTextContent(null)

return (
    <SomeComponent ref={textContainer}>
      This is text with a <a href='/'>link inside it</a>.