React Flashcards
Explain useMemo
It allows us to “remember” a computed value between renders, thus reducing the amount of work that needs to be done in a given render.
Use cases: slow/expensive functions and preserved references
Explain refs in React
When you want a component to “remember” some information, but you don’t want that information to trigger new renders, you can use a ref.
You can access the current value of that ref through the ref.current property. This value is intentionally mutable, meaning you can both read and write to it.
Like state, refs are retained by React between re-renders. However, setting state re-renders a component. Changing a ref does not!
When a piece of information is used for rendering, keep it in state. When a piece of information is only needed by event handlers and changing it doesn’t require a re-render, using a ref may be more efficient.
What is debouncing?
Debouncing lets you delay some action until the user “stops doing things”.
Explain how you can use useRef to manipulate the DOM.
The useRef Hook returns an object with a single property called current. Initially, myRef.current will be null. When React creates a DOM node for this <div>, React will put a reference to this node into myRef.current. You can then access this DOM node from your event handlers and use the built-in browser APIs defined on it.
ex.
const myRef = useRef(null);
<div ref={myRef}>
myRef.current.scrollIntoView();
Explain forwardRefs.
React does not let a component access the DOM nodes of other components (even its own children). To do so, you have to specify that the component is forwarding a ref to its children.
In design systems, it is a common pattern for low-level components like buttons, inputs, and so on, to forward their refs to their DOM nodes.
What is an escape hatch in React?
Escape hatches let you “step outside” React and connect to external systems.
What does it mean for a component to be mounted in React?
It has a corresponding element created in the DOM and is connected to that.
What’s the difference between a Controlled component and an Uncontrolled one in React?
A Controlled Component is one that takes its current value through props and notifies changes through callbacks like onChange. A parent component “controls” it by handling the callback and managing its own state and passing the new values as props to the controlled component. You could also call this a “dumb component”.
A Uncontrolled Component is one that stores its own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.
In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself.
To write an uncontrolled component, instead of writing an event handler for every state update, you can use a ref to get form values from the DOM.
// Controlled:
<input type=”text” value={value} onChange={handleChange} />
// Uncontrolled:
<input type=”text” defaultValue=”foo” ref={inputRef} />
// Use inputRef.current.value to read the current value of <input></input>
What is reconciliation?
When a component’s props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. This process is called reconciliation.
What is the difference between Component and Container in Redux?
Component is part of the React API. A Component is a class or function that describes part of a React UI.
Container is an informal term for a React component that is connected to a redux store. Containers receive Redux state updates and dispatch actions, and they usually don’t render DOM elements; they delegate rendering to presentational child components.
What is the purpose of using super constructor with props argument in React?
A child class constructor cannot make use of this reference until super() method has been called. The same applies for ES6 sub-classes as well. The main reason of passing props parameter to super() call is to access this.props in your child constructors.
Name the different lifecycle methods in class components
componentWillMount - this is most commonly used for App configuration in your root component.
componentDidMount - here you want to do all the setup you couldn’t do without a DOM, and start getting all the data you need. Also if you want to set up eventListeners etc. this lifecycle hook is a good place to do that.
componentWillReceiveProps - this lifecyclye acts on particular prop changes to trigger state transitions.
shouldComponentUpdate - if you’re worried about wasted renders shouldComponentUpdate is a great place to improve performance as it allows you to prevent a rerender if component receives new prop. shouldComponentUpdate should always return a boolean and based on what this is will determine if the component is rerendered or not.
componentWillUpdate - rarely used. It can be used instead of componentWillReceiveProps on a component that also has shouldComponentUpdate (but no access to previous props).
componentDidUpdate - also commonly used to update the DOM in response to prop or state changes.
componentWillUnmount - here you can cancel any outgoing network requests, or remove all event listeners
associated with the component.
What is {this.props.children} and when you should use it?
You can use props.children on components that represent ‘generic boxes’ and that don’t know their children ahead of time. It is used to display whatever you include between the opening and closing tags when invoking a component.
What’s the typical flow of data like in a React + Redux app?
Callback from UI component dispatches an action with a payload, which then is intercepted in a reducer, possibly producing a new application state, which is then propagated down through the tree of components in the application from the Redux store.
What are the different phases of ReactJS component lifecycle?
- Initialization: In this phase react component prepares setting up the initial state and default props.
- Mounting: The react component is ready to mount in the browser DOM. This phase covers componentWillMount and componentDidMount lifecycle methods.
- Updating: In this phase, the component get updated in two ways, sending the new props and updating the state. This phase covers shouldComponentUpdate, componentWillUpdate and componentDidUpdate lifecycle methods.
- Unmounting: In this last phase, the component is not needed and get unmounted from the browser DOM. This phase include componentWillUnmount lifecycle method.
