React Flashcards
Error boundaries
React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them. eg: used in class components as of react v17, with help of componentDidCatch()
Hook rules
Hooks can only be called inside React function components.
Hooks can only be called at the top level of a component.
Hooks cannot be conditional
React Classes
Classes can have it’s own methods and Inheritance.
where super() method refers to the parent class.
By calling the super() method in the constructor method, we call the parent’s constructor method and gets access to the parent’s properties and methods.
Arrow functions
regular function, this represents the object that called the function.
arrow function, this represents the Header object no matter who called the function
Some of the Hooks
useState useEffect useContext useRef useReducer useMemo useCallback useImperativeHandle useLayoutEffect useDebugValue
useState
to track state in a function component.
useEffect
to perform side effects in your components like fetching data, directly updating the DOM, and timers.
use following lifecycle methods within a single function api i.e. useEffect
useEffect runs
1. componentDidMount - when mounted (runs when sec arg is [ ] )
2. componentDitUpdate - when state updates (runs when sec arg is [something] )
3. componentWillUnmount - when component is destroyed (return a func in useEffect callback - i.e. teardown function)
useEffect(( ) => {
//Runs on every render
});
useEffect(( ) => {
//Runs only on the first render
}, [ ]);
useEffect(( ) => {
//Runs on the first render
//And any time any dependency value changes
}, [prop, state]);
useContext
makes use of context api. to manage state globally.
share data without passing props, with entire component tree.
createContext(obj);
Context Provider(to supply state value to child Component, that way all components in that component tree will have access to the user Context.)
Use the useContext Hook(access the user Context in all/any components)
useRef
creates a mutable object to persist values between renders.
to store a mutable value that does not cause a re-render when updated.
to access a DOM element directly.
- Does Not Cause Re-renders
useRef() only returns an Object called current.
access ref by someobj.current. - Accessing DOM Elements
add a ref attribute to an HTML element to access it directly in the DOM.
access ref by inputElement.current.focus(); - Tracking State Changes
to keep track of previous state values. because we are able to persist useRef values between renders.
Also forwardRef() - to call the reference element to be used by consumers of reference component
useReducer
It allows for custom state logic.
returns an array of two values such as reactive data(to show in UI) and dispatch.
const [ reactive data, dispatch ] = useReducer( reducer , initialState )
works similar to setState.
instead of a function to update the state, here it dispatch(es) an action.
dispatch({ type: "COMPLETE", id: todo.id });
action is of an object that has type:string, payload(optional):any
action triggers reducer function
this function can be passed as first argument into useReducer, second is initial state like 0.
then this func takes state and action as props and switch method is used to update state.
const reducer = (state, action) => {
switch (action.some_string) { case ... }
}
eg. use this as a redux pattern to manage state complexities
useReducer use cases
1. Manage multiple states: modify an array
2. Modify complex states, such as arrays or objects: login form
useMemo
returns a memoized value.
only runs when one of its dependencies update.
This can improve performance.
used to keep expensive, resource intensive functions from needlessly running.
optimize computation cost for improved performance.
memoization - cache result of function call
useCallback
returns a memoized callback function.
to isolate resource intensive functions so that they will not automatically run on every render.
only runs when one of its dependencies update.
This can improve performance.
to prevent a component from re-rendering unless its props have changed.
eg. when a function is passed to multiple child components.
Wrap the function with useCallback(), this prevents unnecessary re-renders of children component
useCallback vs useMemo
The useCallback and useMemo Hooks are similar. The main difference is that useMemo returns a memoized value and useCallback returns a memoized function.
useImperativeHandle : *rare
used to change behavior of exposed ref.
eg. modify the method on native element.
useLayoutEffect: *rare
like useEffect
runs after render but before painting to screen
blocks visual updates until callback is finished
