Normally, function components are rerendered every time the application renders. If you have large/complex components, this can affect application performance.
You can use React.memo, React.useCallback, and React.useMemo to memoize parts of your application. This means that React will cache and reuse their previous results instead of rerendering them.
Example:
We start with a useReducer-based Counter application, with the following additions: