React Flashcards
What is Profiler API
A Profiler can be added anywhere in a React tree to measure the cost of rendering that part of the tree. It requires two props: an id (string) and an onRender callback (function) which React calls any time a component within the tree “commits” an update.
render(
<App>
<Profiler id="Navigation" onRender={callback}>
<Navigation {...props} />
</Profiler>
<Main {...props} />
</App>
);
What methods are called in order during Mounting?
constructor()static getDerivedStateFromProps()render()componentDidMount()
What’s the use of a constructor in React?
Initializing local state by assigning an object to this.state.
Binding event handler methods to an instance.
How to prevent props from being undefined in a class component
call super(props) before any other statement.
Avoid copying props into state.
constructor(props) {
super(props);
// Don't do this!
this.state = { color: props.color };
}componentDidMount()
componentDidMount() is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request.
Where should you place subscriptions in class Components
componentDidMount() is a good place to set up any subscriptions. If you do that, don’t forget to unsubscribe in componentWillUnmount().
componentDidUpdate()
componentDidUpdate(prevProps, prevState, snapshot)
is invoked immediately after updating occurs. This method is not called for the initial render. Compare prev and current props before making data requests/calculations, to prevent infinite loops.
Cases where componentDidUpdate() is not invoked?
componentDidUpdate() will not be invoked if shouldComponentUpdate() returns false.
componentWillUnmount()
componentWillUnmount() is invoked immediately before a component is unmounted and destroyed. Do necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any subscriptions that were created in componentDidMount().
shouldComponentUpdate()
Use shouldComponentUpdate() to let React know if a component’s output is not affected by the current change in state or props.
This method only exists as a performance optimization. Do not rely on it to “prevent” a rendering, as this can lead to bugs. Consider using the built-in PureComponent instead of writing shouldComponentUpdate() by hand. PureComponent performs a shallow comparison of props and state, and reduces the chance that you’ll skip a necessary update.
static getDerivedStateFromProps()
getDerivedStateFromProps is invoked right before calling the render method, both on the initial mount and on subsequent updates. It should return an object to update the state, or null to update nothing.
getSnapshotBeforeUpdate()
getSnapshotBeforeUpdate() is invoked right before the most recently rendered output is committed to e.g. the DOM. It enables your component to capture some information from the DOM (e.g. scroll position) before it is potentially changed. Any value returned by this lifecycle method will be passed as a parameter to componentDidUpdate().
static getDerivedStateFromError()
This lifecycle is invoked after an error has been thrown by a descendant component. It receives the error that was thrown as a parameter and should return a value to update state.
static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI.
return { hasError: true };
}
componentDidCatch()
This lifecycle is invoked after an error has been thrown by a descendant component. It receives two parameters:
error - The error that was thrown.info - An object with a componentStack key containing information about which component threw the error.
What are the legacy Lifecycle Methods
componentWillMountcomponentWillReceivePropscomponentWillUpdate
How to work with legacy Lifecycle Methods
adding the following lifecycle aliases: UNSAFE_componentWillMount, UNSAFE_componentWillReceiveProps, UNSAFE_componentWillUpdate.
using, static getDerivedStateFromProps and getSnapshotBeforeUpdate.
render()
The render() is the only required method in a class component.
When called, it should examine this.props and this.state and return one of the following types:
React elements. Typically created via JSX. For example, <div /> and <MyComponent /> are React elements that instruct React to render a DOM node, or another user-defined component, respectively.
Arrays and fragments. Let you return multiple elements from render.
Portals. Let you render children into a different DOM subtree.
String and numbers. These are rendered as text nodes in the DOM.
Booleans or null. Render nothing. (Mostly exists to support return test && <Child /> pattern, where test is boolean.)
In what occasion will render() not be invoked?
render() will not be invoked if shouldComponentUpdate() returns false.
setState()
setState(updater[, callback])
Updates state by merging the whole state with the individual piece of state updated.
forceUpdate()
component.forceUpdate(callback)
By default, when your component’s state or props change, your component will re-render. If your render() method depends on some other data, you can tell React that the component needs re-rendering by calling forceUpdate().
defaultProps
defaultProps can be defined as a property on the component class itself, to set the default props for the class. This is used for undefined props, but not for null props.
displayName
The displayName string is used in debugging messages. Usually, you don’t need to set it explicitly because it’s inferred from the name of the function or class that defines the component.
What is the meaning of Virtual DOM?
The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.
