26 Questions
What is one of the characteristics of a pure function?
It minds its own business
What is the benefit of writing components as pure functions?
It avoids an entire class of baffling bugs and unpredictable behavior
What is an example of a pure function?
The double function in JavaScript
What does React assume about the components you write?
That they are pure functions
What does a pure function always return given the same inputs?
The same result
What is a benefit of using Strict Mode?
To find mistakes in your components
What is a way to keep components pure?
By keeping changes out of the render phase
What can be thought of as recipes?
React components
Why does React care about purity in components?
Because it unlocks marvelous opportunities in React features
What should you do if you can't find the right event handler for your side effect?
Attach it to your returned JSX with a useEffect call
What is a characteristic of a pure function in React?
It always returns the same result for the same inputs
Why is it safe to stop calculating at any time in React?
Because purity makes it safe to stop calculating at any time
What should you do to update the screen in React?
Set state instead of mutating preexisting objects
What is a benefit of writing pure functions in React?
It unlocks the power of the React paradigm
Why should you strive to express your component's logic in the JSX you return?
Because it unlocks the power of the React paradigm
What should you do when you need to 'change things' in React?
Use an event handler
What does the component serve to React to render?
That 'dish' is the JSX
What is the issue with calling the component multiple times?
It will produce different JSX
What makes a component 'pure'?
It only depends on the guest prop
What is the purpose of StrictMode in React?
To detect impure calculations
What is the issue with the original component example?
It is not pure
What is local mutation in React?
Changing variables and objects created during the same render
Where do side effects usually belong in React?
Inside event handlers
What is the result of calling a pure function twice?
Same outputs
What is the issue with changing preexisting variables or objects while rendering?
It makes the component impure
What is the purpose of treating inputs as read-only in React?
To make the component pure
Study Notes
Pure Functions in React
- A pure function has three characteristics:
- It minds its own business (does not change external variables or objects)
- Same inputs, same output
- Given the same inputs, the function always returns the same result
- Writing pure functions in React helps avoid bugs and unpredictable behavior
- React components should be written as pure functions, which means:
- They only perform calculations and do not change external variables or objects
- Same inputs, same JSX output
- Given the same inputs, the component always returns the same JSX
Benefits of Pure Functions
- Allow components to be rendered in any order
- Enable caching and skipping re-renders when inputs haven't changed
- Allow React to safely stop calculating at any time
- Enable server-side rendering
- Unlock the power of the React paradigm for features like data fetching, animations, and performance
Detecting Impure Functions with Strict Mode
- Strict Mode calls each component's function twice during development to detect impure functions
- Impure functions can cause confusing bugs and unpredictable behavior
- Pure functions are not affected by Strict Mode and will always return the same result
Local Mutation vs. External Mutation
- Local mutation: changing variables or objects created within the component's scope
- External mutation: changing variables or objects created outside the component's scope
- Pure functions do not mutate external variables or objects
Side Effects and Event Handlers
- Side effects: changes that occur outside of rendering, e.g. updating the screen, starting an animation, changing data
- Event handlers: functions that React runs in response to user actions, e.g. clicking a button
- Event handlers do not need to be pure functions and can cause side effects
-
useEffectcan be used as a last resort to attach side effects to the returned JSX
Learn about the benefits of using pure functions in JavaScript, how to keep components pure, and how to use Strict Mode to find mistakes.
Make Your Own Quizzes and Flashcards
Convert your notes into interactive study material.
Get started for free
