Overview

• React Components
• Primitive Hooks
• Redux Hooks
• Fast Refresh

React Components

React Components

• Declarative
• Encapsulated state
• Composable

Declarative

• Declare how your view will look like
• React will update DOM or another host tree

Encapsulated State

• Each component manage its own state

Composable

• You can compose components to create complex UIs

React Components

Props

• Properties to modify a component
• Read only, can't be modified

State

• Something that will change in the scope of the component
• it will rerender the component when changed

React Components

Effects

• Side effect created by a component

Component Dichotomy

• It acts as a pure function in some cases
• It acts as a stateful logics in some cases
• It can cause side effects in some cases

Component Dichotomy

• classes were used to represent stateful logic
• functions were used to represent pure logic

React Hooks

• Bring stateful logic and side effects to function components
• it is all about co-location
• Compose and share state and effects

Before Hooks

After Hooks

Hooks Gif

Primitive Hooks

Rules of Hooks

• Only Call Hooks at the Top Level (Don’t call Hooks inside loops, conditions, or nested functions)
• Only Call Hooks from React Functional Components
• Do not work with classes

useState

useState

• Declares a value that will be managed by this component

old style setState

useContext

useContext

• reads a context value on render from the closest <Provider>
• it will be rerendered when context value changes

old style contextType class

Component Lifecycle

Component Lifecycle (Full)

useEffect

• replaces the use of component lifecycles
• let you hook in commit phase
• happen "after render"
• it is about synchronization

useEffect - examples

• data fetching (use suspense approach instead)
• subscriptions
• manually changing the DOM

Effect without cleanup (lifecycle)

Effect without cleanup (useEffect)

Effect with cleanup (lifecycle)

Effect with cleanup (useEffect)

Lifecycle Optimization

useEffect Optimization

Hooks Array of Dependencies

• Some hooks receive an array of dependencies
• it is used to avoid closure pitfalls
• it will memoize hooks based on deps

Eslint Plugin React Hooks

• rules-of-hooks
• exhaustive-deps: make sure all deps are on array of deps

useReducer

• alternative from useState
• better for states that change together
• redux like api

useReducer

useReducer

useCallback

• memoize a callback (function)
• avoid unnecessary renders

useCallback

useMemo

• memoize a value
• only recompute if array of deps changes
• used for optimizations and avoid unnecessary re-renders

useMemo

useRef

• store mutable ref object
• persist for the full lifetime of the component
• "instance" variable
• can store a DOM ref
• doesn’t notify you when its content changes

useRef - mutable value

useRef - DOM ref

useRef - instance variable

Callback Ref

useImperativeHandle

• used to customize the instance of a value (ref)
• imperative code should be avoided in most cases

useImperativeHandle

useLayoutEffect

• similar to useEffect
• synchronous
• used to read layout
• does not work in SSR
• can be used to avoid flicker

useLayoutEffect

useDebugValue

• display a custom label on React Dev Tools

useDebugValue

Concurrent Mode Hooks

useTransition

• avoid loading state when transition to the next screen
• only show loading indicator if transition takes too long

useTransition

useDeferredValue

• show a lag behind value
• useful to keep interface responsive

useDeferredValue

Custom Hooks

Custom Hooks

• a function that starts with use
• a function that may call other hooks

Custom Hooks Examples

usePrevious

useToday

useWhyDidUpdate

usePrompt

Redux Hooks

useSelector

• extract data from redux store state
• equivalent/replacement to mapStateToProps
• still needs reselect to memoize selectors

useSelector

mapStateToProps (old style)

useDispatch

• used to dispatch actions to redux store
• equivalent/replacement to mapDispatchToProps

useDispatch

mapDispatchToProps (old style)

useStore

• return the store passed to Provider
• try to avoid this

useStore

Hooks Everywhere

Fast Refresh

Fast Refresh

• new implementation of "hot reloading"
• available on react native >=0.61.x
• local state is preserved only for functions components
• unify "live reloading" and "hot reload"

Fast Refresh

• not available on react web yet
• better error handling
• force reset using a comment syntax @refresh reset

How it works?

• React Refresh Babel plugin to register components and hooks
• React Refresh Runtime to update/refresh components that changed

What's Next?

• maybe more primitive hooks in concurrent mode?
• fast refresh on web

References

• Reactjs Docs
• Redux Docs
• threepointone tweet about hooks
• gif hooks tweet
• A Complete Guide to useEffect

References

• My Wishlist For Hot Reloading
• Why isn't X a Hook
• Writing Resilient Components
• Eslint Plugin React Hooks
• When to useLayoutEffect instead of useEffect
• Fast Refresh