React Component Optimization

UseMemo and useCallback

Similarities: Very similar in usage, passing a function and an array of dependencies, both of which are local to pure. Difference: useMemo returns the result of function execution, useCallback returns function. Purpose: useMemo is used to cache complex computations, useCallback is used to cache functions in props to avoid unnecessary updates.

shouldComponentUpdate,pureComponent,memo

All three are cached at the component level. ShouldComponentUpdate is used when props and state are being updated, and returns true or false. PureComponent makes a shallow comparison of the props of the component. The memo is for function components, much like pureComponent, but you can pass in a custom function. If the function returns true, the cached DOM is returned, otherwise it will be rendered again.