React Flashcards
What is a pure function?
A function is considered pure if it contains no side effects and if, given the same input, it always returns the same output.
When to abstract a chunk of code into its another file from React component?
If you have a component that’s being reused somewhere else, make it its own file. If not, just create it inside of whatever file you need it.
Where side effects should be handled in React?
Any side effects your component has should be wrapped inside of event handlers.
What is an expression in javaScript?
In JavaScript, an expression is any valid unit of code that evaluates to a value.
Why key prop is important while rendering a list?
When you give each list item a unique key prop, it helps React know which items, if any, change throughout different renders of that component.
How JSX looks like at runtime?
function Hello () {
return <h1>Hello World</h1>
}
at build time will be compiled to regular JavaScript like this
import { jsx as _jsx } from “react/jsx-runtime”
js
function Hello() {
return _jsx("h1", {
children: "Hello World"
})
}
What are props?
Props are to components what arguments are to functions.
What is a React Element?
An object representation of a DOM node
ex: <Icon></Icon>
What are hooks?
Hooks are functions, but it’s helpful to think of them as unconditional declarations about your component’s needs. You use React features at the top of your component similar to how you import modules at the top of your file.
When react renders a component?
React re-renders a component whenever its state changes.
When does React re-render?
React will only re-render when the state of a component changes
Important re-render aspect
React will only re-render once per event handler, even if that event handler contains updates for multiple pieces of state. (only if state updates are synchronous and not in async call like setTimeout)
When re-render happens?
Whenever state changes, React will re-render the component that owns that state and all of its child components – regardless of whether or not those child components accept any props.
What means a function having side effects?
A function has a side effect any time it does anything other than take some input, an argument, and calculate some output, a return value.
Adjusted for React, a component has a side effect any time it does anything other than take some input, props and state, and calculate some output, a View.
API calls, manual DOM manipulation, using browser APIs like localStorage or setTimeout, or anything else that falls outside of simply calculating a View based on props and state is a side effect.
React Rule #0
When a component renders, it should do so without running into any side effects.
React Rule #1
If a side effect is triggered by an event, put that side effect in an event handler.
What is lazy state initialization?
The idea is you can pass useState a function that will only be called once, on the initial render, and the return value of that function will be used as the initial value for that state.
Something like:
const [index, setIndex] = React.useState(() => {
return Number(localStorage.getItem("index"))
})
React Rule #2
If a side effect is synchronizing your component with some external system, put that side effect inside useEffect.
When useEffect should be used?
useEffect should be used for synchronizing, not for reacting to changes in a value.
What is cleanup function?
If you return a function from your effect, React will call that function each time before it ever calls your effect again, and then one final time when the component is removed from the DOM.
What means reactive values in React?
A reactive value is any value that can change between re-renders. Props, state, or any variables defined inside of a component are all reactive values.
