React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

In this collection, we'll go through each of the standard hooks offered by the React library, learn how they work and build small applications that leverage them internally.

For function components, the `useState` hook is how you make your component stateful. This replaces the previous convention from class components where values were stored in a `this.state` object and manipulated using `this.setState()`.

The hook returns an array with two values: the state value your are storing and a function that allows you to updated it. When instantiating the hook, the initial state value is determined by whatever value you pass it.

```jsx
const [value, setValue] = useState(null)
```

Make React Function Components Stateful with useState

The `useEffect` hook is used to handle side-effects caused by a component's actions such as fetching data from an API, attaching event listeners to the document or manipulating the DOM itself.

`useEffect` takes two values: a function defining the logic to be executed and an optional array called the "dependency array". By default, effect hooks will run every time the component re-renders, however, you can control its execution by defining and changing the values within your dependency array.

```jsx
useEffect(() => {
	// Runs every time the component renders
})

useEffect(() => {
	// Runs only on initial render
}, []) // Optional second argument: dependency array

useEffect(() => {
	// Runs only when 'apiData' changes
}, [apiData])
```

Control component side effects with React useEffect

While React refs are primarily used to interact with DOM elements, `useRef` can also be used to store values in your function components. 

Unlike `useState`, when this value changes the component will **not** re-render, which means you can leverage `useRef` to avoid unnecessary renders and optimize your application's performance.

```jsx
// Instantiate useRef
const countRef = useRef(0)

// Increment the value while avoiding a re-render
countRef.current = countRef.current + 1
```

Avoid Unnecessary Re-Renders with Reacts useRef

The `useMemo` hook is a performance optimization in React which leverages "memoization" under the hood. Memoization is essentially an internal caching mechanism that allows functions to avoid re-computing expensive values when receiving the same inputs.

`useMemo` has the same function signature as `useEffect` and `useLayoutEffect` because it also takes a function and optional dependency array as its arguments. Unlike those hooks, however, the value returned by `useMemo` is a memoized value.

**Note:** The React documentation suggests that you implement your logic with `useEffect` first to make sure your application works. Then, you can go back and refactor with `useMemo` to improve app performance.

```jsx
// Hook runs whenever the value of 'a' or 'b' change
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])

// Receiving input for the first time returns a newly computed value
computeExpensiveValue(1, 2)

// Receiving the same input arguments returns a cached value
computeExpensiveValue

Optimize React Component Performance with useMemo

At first glance, the `useLayoutEffect` and `useEffect` hooks look the same because they have a very similar function signature. There is, however, a subtle but important difference between them: the timing of when they get executed.

While `useEffect` runs **after** the DOM paints to avoid blocking the page load, `useLayoutEffect` runs **before** the DOM paints, which can help avoid issues with positioning or styling. Generally speaking, you want to use the `useLayoutEffect` instead of `useEffect` when you are interacting with the DOM directly.

Like `useEffect`, `useLayoutEffect` takes two arguments: a function and an optional dependency array.

```jsx
useLayoutEffect(() => {
	// Runs every time the component renders
}, [])

useLayoutEffect(() => {
	// Runs only on initial render
}, []) // Optional second argument: dependency array

useLayoutEffect(() => {
	// Runs only when 'apiData' changes
}, [apiData])
```

Avoid Flashes of Content in React with useLayoutEffect

The `useRef` hook allows us to leverage React refs within our function components. Refs can be assigned to DOM elements in order to allow us to manipulate them directly. 

It is important, however, to note that this is somewhat of an anti-pattern in React as JavaScript frameworks usually handle updating the browser DOM after the virtual DOM has changed.

`useRef` only takes one argument: its initial value. In the code snippet below, you can see how it is then assigned to an `<input />`:

```jsx
// Instantiate the ref
const inputRef = useRef(null);

// Assign `inputRef` to the <input /> element
<input ref={inputRef} type="search" />
```

Manipulate DOM Elements with useRef in React

The `useContext` hook allows you to leverage the React Context API within your function components. This lets your components provide data to their descendants in the component tree while avoiding "prop drilling" (i.e. passing props through components that are not concerned with the data).

When instantiating the hook, it takes one argument: a React context. This subscribes the component to the context and any updated values being provided by the `Context.Provider`. Then, any data being provided by the parent component will be accessible in this component via the `context.current` field.

```jsx
// Create a context
const SearchContext = React.createContext();

// Subscribe to SearchContext
const context = useContext(SearchContext);
```

Build a Search Component in React with useContext

Similar to `useMemo`, the `useCallback` hook also uses memoization internally in order to improve application performance. The difference is the type of value the two hooks return: while `useMemo` returns a memoized value, `useCallback` returns a memoized function.

This allows you to create memoized functions and pass them as props between components without having to repeatedly define the caching mechanism in order to avoid expensive, repetitive computations:

```jsx
// Returns a memoized function
const memoizedFunction = useCallback(() => {
	// Define function logic
}, [data])
```

Create a Memoized Function with React useCallback

Normally, you would use `useState` to store values in your function components. However, when your state value is a complex data object or is comprised of a number of related values, you may want to use `useReducer` instead. This hook allows you to avoid having numerous state hooks and, instead, consolidate your values.

Like `useState`, the array returned by the hook contains two values: your current state and a dispatch function which allows you to update the state. When instantiating the hook, you'll need to pass it two arguments, a reducer function and your initial state. Similar to patterns used in libraries like Redux, when you dispatch an action the reducer function body will determine how to update the internal state.

This is the function signature of the `useReducer` hook:

```jsx
const [state, dispatch] = useReducer(reducer, initialState)
```

Build a Form with useReducer in React

The `useDebugValue` hook will not effect your user experience but is instead aimed at improving the developer experience. When building your own custom hooks, `useDebugValue` can help you debug the hook's internal logic by displaying values in the React Dev Tools.

The hook takes two arguments: a value to be displayed in the developer console and an optional function you can use to format the aforementioned value. The function signature looks like this:

```jsx
const name = 'ryan'

// Outputs 'ryan' to the developer console
useDebugValue(name);

// Outputs 'RYAN' to the developer console
useDebugValue(name, (name) => name.toUpperCase());
```

React Hooks: Revisited

Ryan Harris

Course Content