26 Questions
What characterizes a pure function in computer science?
It minds its own business and does not change external state
What is a benefit of writing components as pure functions?
It helps you avoid bugs and unpredictable behavior
Why is it important to keep changes out of the render phase?
To avoid bugs and unpredictable behavior
What is an example of a pure function in math?
y = 2x
What is a requirement for a pure function?
It must have the same output for the same inputs
What assumption does React make about the components you write?
They are pure functions
What is the benefit of using Strict Mode to find mistakes in your components?
It helps you find mistakes in your components
What is a way to think of your components?
As recipes
What is the main issue with the component that reads and writes a guest variable declared outside of it?
It is not predictable
What is the purpose of passing the guest variable as a prop instead of declaring it outside the component?
To make the component more predictable
What are the three kinds of inputs that you can read while rendering in React?
Props, state, and context
What is the purpose of React's Strict Mode?
To detect impure calculations
What happens when you mutate a variable or object outside of a component's scope while rendering?
The component becomes impure
What is local mutation in the context of React components?
Changing a variable created inside the component's scope
Why does React care about purity in functions?
To improve performance by skipping rendering components whose inputs have not changed.
Where do side effects typically belong in React?
In event handlers
What is a key characteristic of a pure function in React?
It always returns the same result for the same inputs.
What is the main difference between pure and impure functions?
Pure functions are predictable, impure functions are not predictable
When should you use useEffect to attach an event handler?
As a last resort, when you can't find the right event handler for your side effect.
Why does calling a component's function twice in Strict Mode help detect impure calculations?
Because it reveals the component's dependency on external variables
What is the result of calling a pure function twice with the same inputs?
The function returns the same output
What is the benefit of having components that can run in a different environment?
It enables one component to serve many user requests.
Why should you strive to express your component's logic in the JSX you return?
To unlock the power of React's paradigm and take advantage of its features.
What is a key rule to keep in mind when working with props, state, and context in React?
You should not mutate any of the inputs that your components use for rendering.
What is the benefit of having components that are safe to cache?
It improves performance by skipping rendering components whose inputs have not changed.
Why should you avoid using event handlers to change things during rendering?
Because event handlers should not be used to change things during rendering, instead use 'set' state.
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 pure functions in JavaScript and how to avoid bugs by following specific rules. Discover how to keep components pure and use Strict Mode to find mistakes.
Make Your Own Quizzes and Flashcards
Convert your notes into interactive study material.
Get started for free
