React Fundamentals Flashcards
What hook to fetch data in React component when it mounts?
useEffect, empty arr dependency
why? async data fetch is a side effect
make sure runs after render
useEffect vs. TanStack SWR
useEffect, simpler, fully customizable
reactQuery automates caching, refetching, error handling and sharing data across components
how to handle API errors when fetching data in React
try catch block
loading state
error state -> display error message
parse error message and display specific message (400, 500, CORS)
retry mechanism
log errors
how to avoid unnecessary API calls during re-renders.
wrap is useEffect with [] dependency
useCallback to memoize
state management library
reactQuery for caching
lift data logic
throttle/debounce
pagination/infinite scroll
AbortController
2 components need same data, how to avoid fetching twice?
lift data fetching logic
reactQuery
redux state management
React useContext
difference between useState and state mgmt lib?
useState – minimizes re-renders, short lived states (toggle)
library – caching, share state across components
How to let multiple components share and update the same state
lift state, Context API, state management lib
context api pros
low boilerplate, built into react
context api cons
risk excess re-renders because all components consuming context re-render when context changes
redux pros
granular state management
only re-renders components that subscribe to slices of state
built in middleware
redux cons
more overhead, 3rd party
how to prevent unnecessary re-renders
react.memo
selector functions in Redux
split contexts
how to manage async state updates eg. result of an API call in react
useEffect and local state – only set state on mounted component
custom hook
middleware - Redux Thunk
useState vs useReducer
useReducer centralized update state logic in a reducer function
use for more complex state updates, shared across components
useMemo vs useCallback
useMemo memoizes value that doesn’t need to be re-rendered on every state update. only when dependency updates
useCallback memoizes a function that is passed as prop to child component. initVid example. works on a functional level – prevents creating a new function instance on every re-render.
useRef example
ref prop of video element. assigned to videoRef.current when rendered. Can attach properties – src, play, currentTime
rendition of ReactReader
React.memo
memoizes component’s output and skips re-rendering if props haven’t change. prevents unnecessary re-renders of a component
