herrera-ignacio/react-notes

Hooks API use cases & recipes

React notes

Theory and practice notes on React.

Architecture

• Pure functions and side effects

Specifics

• Elements vs components
• forwardRef

Styling

• Design system as Monorepo with Lerna
  • SCSS to CSS
• Waiting for CSS animations

Hooks

• Rules of hooks

Built-in hooks

• useState
• useEffect
• useRef
  • forwardRef
• useContext
• useReducer
  • To-Do list
  • Counter with steps
• useImperativeHandle
• useLayoutEffect
• useSyncExternalStore
• useEffectEvent

Challenges

useEffect and useState

• Counter
• Smart character limit
• Password Toggle
• Multistep form
• Form builder
• Search filter
• Poke API ignore stale response
• Clock
• Country info

useRef

• Autofocus
• Video-player
• Field notes
• Click outside
• Expanding textarea
• Follow the leader

useContext

• Auth context
• Translations context
• Tabs context
• News feed context

useReducer

• Multistep form reducer
• Task manager reducer
• Add to cart reducer
• Undo redo reducer

Referential equality & memoization

• Localized primes
• Data table
• Optimizing renders counter

useLayoutEffect

• React ruler resize
• Flexible tooltip

useSyncExternalStorage

• Match media

Custom hooks

Rebuilding useHooks

https://usehooks.com/

• useDocumentTitle
• useDefault
• useToggle
• usePrevious
• usePreferredLanguage
• useFavicon
• useCopyToClipboard
• useInterval
• useCounter
• useLockBodyScroll
• useQueue
• useTimeout
• useWindowSize
• useVisibilityChange
• useList
• useObjectState
• useDebounce
• useContinuousRetry
• useHistoryState
• useEventListener
• useRandomInterval
• useMediaQuery
• useIntervalWhen
• useMouse
• useClickAway
• useWindowScroll
• useLogger
• useOrientation
• useBattery
• usePageLeave
• useKeyPress
• useThrottle
• useIdle
• useFetch
• useCountdown
• useGeolocation
• useLocalStorage
• useSessionStorage
• useIsClient
• useNetworkState