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


We allowed passing custom props into the `getToggler` props getter. Now, what if the user wanted to pass in a custom `onClick` prop? 

Here’s what I mean: 

.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 from 'react'
import useExpanded from './useExpanded.js'
import useEffectAfterMount from './useEffectAfterMount.js'

import Header from './components/Header'
import Icon from './components/Icon'
import Body from './components/Body'

import './App.css'
const customClickHandler = () => {
    console.log('custom click handler!!!!!')
}

function App () {
  const { expanded, getTogglerProps } = useExpanded()
  return (
    <div style={{ marginTop: '3rem' }}>
      <button
          {...getTogglerProps({
            id: 'my-btn-id',
            'aria-label': 'custom toggler',
            // look here 👇
            onClick: customClickHandler
          })}
        >
          Click to view awesomeness...
      </button>
      {expanded ? <p>{'😎'.repeat(50)}</p> : null}
    </div>
  )
}

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'));

// useEffectAfterMount.js
import { useRef, useEffect } from 'react'

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

import { useCallback, useMemo, useState } from 'react'

export default function useExpanded () {
  const [expanded, setExpanded] = useState(false)
  const toggle = useCallback(
    () => setExpanded(prevExpanded => !prevExpanded),
    []
  )

const getTogglerProps = useCallback(
    ({ ...customProps }) => ({
      onClick: toggle,
      'aria-expanded': expanded,
      // look here 👇
      ...customProps
    }),
    [toggle, expanded]
  )

  const value = useMemo(() => ({ expanded, toggle, getTogglerProps }), [
    expanded,
    toggle,
    getTogglerProps
  ])
  
  return value
}

React

Dart


If the user does this, it completely overrides the `onClick` handler within the `useExpanded` custom hook and breaks the functionality of the app as you can see in the output.

The button no longer expands the element, but the user’s custom click handler is invoked whenever you click the button.  

Why is this the case? 

This is because we have an `onClick` property in the returned object, but it is overridden by the user. 

// useExpandable.js
...
  const getTogglerProps = useCallback(
    ({ ...customProps }) => ({
      onClick: toggle, // this is overriden 
      'aria-expanded': expanded,
      // customProps overrides the onClick above
      ...customProps
    }),
    [toggle, expanded]
  )

# Overriding the User's `onClick` Handler
If you move the position of the internal `onClick` handler, you can override the user. 

In this lesson, we'll see how two prop properties with the same name can be invoked at once.

Introduction

Compound Components Pattern

Control Props

Props Collection

Prop Getters

State Initializer

State Reducer

Conclusion

Handling Props with the Same Property Name

Overriding the User’s `onClick` Handler

Handling Props with the Same Property Name

Overriding the User’s onClick Handler

Overriding the User’s `onClick` Handler