React Grimoire
  • ⁉️Introduction
  • πŸ§‘β€πŸŽ“πŸ§‘πŸŽ“ React Fundamentals
    • The Basic javascript "Hello world"
    • Basic view on React core API's
    • JSX
    • React Props and styling
    • Components
    • Handling Events With React
    • Form
    • Array and Lists
    • Class Component State
    • Class Component Life Cycle
    • PropTypes
  • πŸͺReact Hooks
    • Intro to hooks
    • useState
    • useEffect
    • useRef
    • useContext
    • useMemo
    • useCallback
    • useReducer
    • useLayoutEffect
    • useImperativeHandle
    • Hook flow
    • Custom hooks
      • useDebugValue
    • React 18 hooks
  • πŸ““React Guidelines
    • React Components Composition Guidelines
    • React hooks guidelines
    • The use of Memoization
    • Lifting State Up
  • πŸ”­Concepts
    • Advanced Patterns
      • Compound Components Pattern
      • Control Props Pattern
      • Props Getters Pattern
      • Custom hook pattern
      • Context Module
      • State Reducer
    • React Under the hood
      • 🏁What is "Rendering"?
      • 🏁React Lifecycle
      • 🏁Reconciliation & Virtual DOM in React
      • 🏁Fiber
    • ⏰Concepts to always have in mind
  • 🧩React ecosystem
    • Forms Tools
      • React Hook Form VS Formik
    • TypeScript
      • 🏁Conditional React props with TypeScript
    • 🏁Build tool choice for MVP projects
    • A CSS methodology comparison
      • 🏁Post CSS processor :Sass
      • 🏁CSS in js :Styled-components
      • 🏁Utility Classes: Tailwind
  • ⁉️Testing
    • In Progress
  • 🎭Performance
    • in Progress
  • πŸš€Deployment
    • In Progress
  • πŸ–ΌοΈDesign system
    • 🏁What's a design system anyway ?​?
  • πŸ”—Us-full links
    • Typescript and React basic tutorial
    • React-philosophies
    • React new doc
Powered by GitBook
On this page
  • When should I create a new custom hook?
  • Document your custom hooks!
  • Testing custom hooks
  • References and articles :

Was this helpful?

Edit on GitHub
  1. React Guidelines

React hooks guidelines

Before react 16.8, it was already possible to reuse some stateful logic across your app with higher-order components and render props but Custom Hooks let you do it without adding more components to your tree.

Hooks are a way to reuse stateful logic, not state itself. In fact, each call to a Hook has a completely isolated state β€” so you can even use the same custom Hook twice in one component.

Custom Hooks are more of a convention than a feature. If a function’s name starts with ”use” and it calls other Hooks, we say it is a custom Hook. The useSomething naming convention is how the linter plugin is able to find bugs in the code using Hooks.

You can write custom Hooks that cover a wide range of use cases like form handling, animation, declarative subscriptions, timers, and probably many more we haven’t considered.

When should I create a new custom hook?

When we want to share logic between two JavaScript functions, we extract it to a third function. Both components and Hooks are functions, so this works for them too!

Hooks core motivations :

  • It’s hard to reuse stateful logic between components

  • Complex components become hard to understand

  • Classes confuse both people and machines

With this in mind, you can create new custom hooks when :

  • There is similar stateful logic across components

  • You want to write specific stateful logic without rendering anything.

  • You want to extract logic from your component body to make it easier to read/understand/maintain, or you want to separate render and logic concerns.

Hooks can be shared easily between pages, components, and hooks! So, when creating a new custom hook, consider whether there is any shareable logic that can be isolated in the hooks/ folder.

Otherwise, you have the choice between letting your custom hook's code in the same file as your page or creating a new file aside your component's file.

Please remember that every file need to be tested.

You can found some example on

Document your custom hooks!

As with most things in a large organization, the more custom hooks your team creates, the easier it is to lose track of them.

It's a good idea to keep track of every hook you make. If not for the sake of your team, then for the sake of yourself in the future. Make sure people are aware of your hook's existence, what it does, and what your intentions were, whether it's a README in each hook's folder or a doc in a wiki.

A note like "This was a massive hack where we only covered case X due to this buggy API we use" is far more valuable than nothing.

/**  * This is a JSDOC comment. 
     * VS Code's tooltip will show extra information because of me. 
     */
const useMyCustomHook = (props) => { };

Don't make the mistake of assuming that your code is self-documenting or simple to understand. Because it's still fresh in your mind, you're probably thinking your code is simple.

Testing custom hooks

Here's an example from their docs. Given a hook extracted as useCounter:

import { useState, useCallback } from 'react';

function useCounter() {  
  const [count, setCount] = useState(0);
  const increment = useCallback(() => setCount((x) => x + 1), []);
  
  return { count, increment };
  }
  
export default useCounter;

Your tests would look like this:


import { renderHook, act } from '@testing-library/react-hooks';
import useCounter from './useCounter';

test('should increment counter', () => {  
  const { result } = renderHook(() => useCounter());
  
  act(() => {    result.current.increment();  });
  expect(result.current.count).toBe(1);
  
  });

References and articles :

PreviousReact Components Composition GuidelinesNextThe use of Memoization

Last updated 3 years ago

Was this helpful?

Adding comments above your hooks is also useful

Thanks to React Testing Library's , it's never been easier to test hooks in isolation.

πŸ““
JSDOC
react-hooks-testing-library
Building Your Own Hooks – React
Jsdoc cheatsheetDevhints.io cheatsheets
Rules of Hooks – React
Best Practices With React Hooks β€” Smashing MagazineSmashing Magazine
Logo
Logo
Logo
Logo