7^th Practical Class:
More Hooks, forwardRef, memo

Some More Hooks

• useMemo, useCallback
• Custom Hooks
• useRef (focus)

useMemo, useCallback

• useMemo: "value memoization"
• useCallback: "function/callback memoization"

Whithout Memoization:

With Memoization:

React.memo

• Use React.memo() wisely
  • 🚧❗ use React.memo only when something becomes slow
  • 🚧❗ overuse of React.memo will make your app much slower!
  • remember: Premature optimization is the root of all evil
    • same is for useMemo and useCallback - use it only when needed

Custom Hooks

• see Building Your Own Hooks
• use use* prefix!

useRef

• useRef documentation

React.forwardRef

• React.forwardRef documentation
• allows you to use ref in custom components

Enable ref for custom component: