Gain insights into advanced React patterns with hooks. Learn about optimizing components with hooks over traditional methods like render props or higher-order components for better efficiency.

With the release of hooks, certain React patterns have gone out of style. Hooks are likely the way we’ll be writing React components for the next couple of years, so they are quite important. React patterns can still be used, but in most cases, developers will be better off using hooks. For example, they should choose hooks over render props or higher-order components. There may be specific cases where the aforementioned could still be used, but most of the time, hooks are better. That being said, this course will teach you some of the more advanced React patterns implemented with hooks.

Advanced React Patterns With Hooks

# Using the Custom Function Without a Reducer
Right now, if some user other than this crazy hacker uses our custom function without passing a reducer, their app breaks. 

useExpanded(false) // 👈 user doesn't need reducer feature

Try running this below to see how not passing a reducer breaks the app.

.App {
  text-align: center;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  align-items: center;
  padding-top: 2rem;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 40vmin;
  pointer-events: none;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


import React, { useRef } from 'react'
import useExpanded, { useEffectAfterMount } from './components/Expandable'
import Header from './components/Header'
import Icon from './components/Icon'
import Body from './components/Body'

import './App.css'
import './components/Expandable.css'

/**
 * useExpanded consumer builds an App to share a conspiracy.
 * Goal:
 * - after the user clicks to see the conspiracy ...
 * - the reset callback should be invoked
 * - the user should NOT be able to expand the container any longer
 * - the secret can only be viewed ONCE!!!
 */

function App () {
  const hasViewedSecret = useRef(false)
  const { expanded, toggle, override, reset, resetDep } = useExpanded(false)
  function appReducer (currentInternalState, action) {
    if (
      hasViewedSecret.current &&
      action.type === useExpanded.types.toggleExpand
    ) {
      return {
        ...action.internalChanges,
        // override internal update
        expanded: false
      }
    }
    return action.internalChanges
  }

  useEffectAfterMount(
    () => {
      // open secret in new tab ð
      window.open('https://leanpub.com/reintroducing-react', '_blank')
      hasViewedSecret.current = true
      // perform side effect here ð e.g persist user details to database
    },
    [resetDep]
  )

  return (
    <section className='App'>
      <div className='Expandable'>
        <Header toggle={toggle} style={{ border: '1px dotted red' }}>
          {' '}
          They've been lying to you{' '}
        </Header>
        <Icon expanded={expanded} />
        <Body expanded={expanded} style={{ background: 'papayawhip' }}>
          <p>
            This is highly sensitive information and can only be viewed ONCE!!!!
          </p>
          <p>
            Click to view the conspiracy <br />
            <button onClick={reset}> View secret </button>
          </p>
        </Body>
      </div>
      {hasViewedSecret.current && (
        <button onClick={override}>Be redeemed to view secret again</button>
      )}
    </section>
  )
}

export default App


body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}


import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

import { useRef, useEffect } from 'react'

export default function useEffectAfterMount (cb, deps) {
  const componentJustMounted = useRef(true)
  useEffect(() => {
    if (!componentJustMounted.current) {
      return cb()
    }
    componentJustMounted.current = false

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, deps)
}


import { useCallback, useMemo, useRef, useReducer } from 'react'

const callFunctionsInSequence = (...fns) => (...args) => {
  console.log(args)
  return fns.forEach(fn => fn && fn(...args))
}

const internalReducer = (state, action) => {
  switch (action.type) {
    case useExpanded.types.toggleExpand:
      return {
        ...state,
        expanded: !state.expanded
      }
    case useExpanded.types.reset:
      return {
        ...state,
        expanded: action.payload
      }
    case useExpanded.types.override:
      return {
        ...state,
        expanded: !state.expanded
      }
    default:
      throw new Error(`Action type ${action.type} not handled`)
  }
}

export default function useExpanded (initialExpanded = false, userReducer) {
  const initialState = { expanded: initialExpanded }
  const resolveChangesReducer = (currentInternalState, action) => {
    const internalChanges = internalReducer(currentInternalState, action)
    const userChanges = userReducer(currentInternalState, {
      ...action,
      internalChanges
    })
    return userChanges
  }

  const [{ expanded }, setExpanded] = useReducer(
    resolveChangesReducer,
    initialState
  )

  const toggle = useCallback(
    () => setExpanded({ type: useExpanded.types.toggleExpand }),
    []
  )

  const override = useCallback(
    () => setExpanded({ type: useExpanded.types.override }),
    []
  )

  const resetRef = useRef(0)
  const reset = useCallback(
    () => {
      setExpanded({ type: useExpanded.types.reset, payload: initialExpanded })
      ++resetRef.current
    },
    [initialExpanded]
  )

  const getTogglerProps = useCallback(
    ({ onClick, ...props }) => ({
      'aria-expanded': expanded,
      onClick: callFunctionsInSequence(toggle, onClick),
      ...props
    }),
    [toggle, expanded]
  )

  const value = useMemo(
    () => ({
      expanded,
      toggle,
      getTogglerProps,
      reset,
      resetDep: resetRef.current,
      override
    }),
    [expanded, toggle, getTogglerProps, reset, override]
  )

  return value
}

useExpanded.types = {
  toggleExpand: 'EXPAND',
  reset: 'RESET',
  override: 'OVERRIDE'
}


React

Dart

Running the code above will get you an error like this:
<center>
<img src="/api/collection/10370001/4597752283529216/page/6638413597900800/image/6083340715163648" />
</center>

## Providing a Default Reducer
Let’s provide a default reducer within our custom hook for users who don’t need this feature. 

You finally made it! We're almost done. Let's clean a few things up.

Introduction

Compound Components Pattern

Control Props

Props Collection

Prop Getters

State Initializer

State Reducer

Conclusion

Cleanups

Using the Custom Function Without a Reducer