w07d5

W07D05 - Custom Hooks

To Do

• Custom Hooks
• useDocumentTitle
• useMousePosition (tests)
• useInput (tests)
• useRequest
• useKeyPress

Custom Hooks

• From the React Docs:

Building your own Hooks lets you extract component logic into reusable functions.

• We can pull repetitive or complex code out of our components and move it into custom hooks
• Custom hooks are just JavaScript functions that can use React hooks
• They must start with the prefix use so that React knows they are hooks
• Multiple components using the same custom hook do not share state

// simple custom hook
const useDocumentTitle = (title) => {
  useEffect(() => {
    document.title = title;
  }, [title]);
};

// inside of a component
useDocumentTitle('My New Title');

Custom Hook Examples

• Browser Dimensions
• Mouse Position

Useful Links

• React Docs: Custom Hooks
• Easy to Understand Hook Recipes
• React Hooks Resource