React Fundamentals
79 flashcards by MentisLibrary
Components, props, state, hooks, effects, keys and context, plus the mistakes that cause stale data, infinite loops and lost state, and what actually makes React re-render.
- What is React?
- A JavaScript library for building user interfaces from composable components that describe what the UI should look like for a given state.
- What is a React component?
- A function that takes props and returns JSX describing a piece of UI.
- What is JSX?
- A syntax extension that looks like HTML and compiles to React.createElement calls (or the automatic jsx runtime).
- Why className instead of class?
- class is a reserved word in JavaScript, so JSX uses the DOM property name className.
- How do you embed a JavaScript expression in JSX?
- Wrap it in curly braces; the value is evaluated and inserted.
- What are props?
- Read-only inputs passed from a parent to a child component, arriving as a single object argument.
- What is props.children?
- Whatever a component's opening and closing tags wrap, passed automatically as the children prop.
- What is state?
- Data owned by a component that can change over time, and whose change triggers a re-render.
- How does useState work?
- It returns the current value and a setter, and preserves that value across renders of the same component instance.
- What is lazy initial state?
- Passing a function to useState so an expensive initial computation runs only on the first render.
- What is a functional state update?
- Passing a function to the setter, which receives the latest state, avoiding a stale closure value.
- Is setState synchronous?
- No. React schedules the update and re-renders later, so reading the state variable right after setting it gives the old value.
- What is automatic batching?
- React groups multiple state updates into a single re-render, including inside promises, timeouts, and native handlers since React 18.
- What are the Rules of Hooks?
- Only call hooks at the top level of a component or another hook, and never inside conditions, loops, or nested functions.
- What does useEffect do?
- Runs a side effect after the component renders and the DOM has been committed.
- What is the useEffect dependency array?
- The list of reactive values the effect reads; the effect re-runs whenever any of them changes between renders.
- What is an effect cleanup function?
- The function returned from an effect, which React runs before the next effect run and on unmount.
- How do you avoid an infinite effect loop?
- Do not set state that is also in the dependency array without a condition, and do not pass a freshly created object or function as a dependency.
- When should you NOT use an effect?
- For transforming data for rendering, for handling user events, or for state that can be computed from existing props and state.
- What does useRef do?
- Returns a mutable object whose .current persists across renders and does not trigger a re-render when changed.
- Difference between useRef and useState
- Changing a ref does not re-render; changing state does. Refs are for values the UI does not display.
- What does useMemo do?
- Caches the result of an expensive computation between renders, recomputing only when a dependency changes.
- What does useCallback do?
- Returns a memoized version of a function so its identity stays stable between renders.
- What is React.memo?
- A higher-order component that skips re-rendering when the new props are shallowly equal to the previous ones.
- What does useContext do?
- Reads the nearest matching Provider's value, letting a deep component consume shared data without prop drilling.
- How do you create and provide a context?
- createContext gives you the object, and a Provider component supplies the value to everything below it.
- What is prop drilling?
- Threading a value through many intermediate components that do not use it, only to reach a deep child.
- What does useReducer do?
- Manages state through a reducer function that maps the current state plus an action to the next state.
- When do you choose useReducer over useState?
- When updates are complex, interdependent, or spread across many handlers, and when you want the logic testable outside the component.
- What is a custom hook?
- A function whose name starts with use and which calls other hooks, letting you reuse stateful logic between components.