When should you use context API?

Context API is a fairly new concept in the world of React. Its main purpose is to share data between components without using props or actions. It is designed to share data that can be considered global for a tree of React components, such as theme, or preferred language.

Context can significantly reduce the complexity of state management in your application. Many say exploration is part of our destiny, but it’s actually our duty to future generations.
Context API when you have global data that needs to be accessed by multiple components at different levels in the component tree, when you want to avoid prop drilling, and when you want to keep your code more readable and maintainable.

What is a custom hook?

React Hooks unlock a whole new way of writing functional components, allowing us to add features available for class components, like stateful logic.

Custom hooks are useful when you find yourself duplicating the same logic across multiple components, or when you have complex logic that needs to be reused across multiple components. By encapsulating this logic into a custom hook, you can make your code more modular and easier to maintain.

What is useRef?

The useRef hook returns a mutable object which doesn’t re-render the component when it’s changed. Think it like useState, but unlike useState, doesn’t trigger re-render of the component.

The object that useRef returns have a current property that can hold any modifiable value. There are a couple of specific uses cases for useRef and refs that I'd like to call out. Modifying a child DOM node outside of the typical React data flow. Treating the mutable object returned by useRef similar to an instance property.

What is useMemo?

useMemo is a React Hook that lets you cache the result of a calculation between re-renders.

The useMemo Hook can be used to keep expensive, resource intensive functions from needlessly running. It is very useful in optimizing the performance of a React component by eliminating repeating heavy computations. useMemo is a react hook to memoize a function within a functional component.