React

In addition to the useState Hook, there is the useReducer Hook in React. It allows for the creation of custom state logic. useReducer may be useful if you have to track multiple pieces of state involving complex logic. The useReducer Hook accepts two arguments. Syntax: useReducer(<reducer>, <initialState>) The reducer function contains your custom state logic and the initialState can be a simple value but generally will contain an object. The useReducer Hook returns the current state and a dispatch method....

The React useCallback Hook returns a memoized callback function. Think of memoization as caching a value so that it does not need to be recalculated. This allows us to isolate resource intensive functions so that they will not automatically run on every render. The useCallback Hook only runs when one of its dependencies update. This can improve performance. Why does this matter? In JavaScript, functions display referential equality. This means they are only considered equal if they point to the same object....

A higher-order function takes a function as an argument and returns a function. HOC is not a feature in React or any other programming language. It is a pattern that emerged from the components nature of React. Examples of the higher-order functions are the; .map, .filter, etc. In react, a higher-order component (HOC) is deemed an advanced technique for reusing component logic. They are not part of the React API, but they are the model that begins from React’s compositional nature....

What is React.memo() ? Using memo will cause React to skip rendering a component if its props have not changed. This can improve performance. When to use React.memo() ? We can use React.memo if React component: Will always render the same thing given the same props (i.e, if we have to make a network call to fetch some data and there’s a chance the data might not be the same, do not use it)....

Only Call Hooks at the Top Level Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That’s what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls. Only Call Hooks from React Functions Don’t call Hooks from regular JavaScript functions....