When should you use context API?

Managing the state is an essential part of developing applications in React. A common way to manage the state is by passing props. But it can be annoying to pass props when you have to send the same data to lots of components or when components are far away from each other.

Here are some real-world use cases of Context API.

• when we need to share data across multiple components.
• when we have deeply nested components that need to access shared data
• avoid prop drilling
• when we need to update multiple components in our React application

Other mostly common use cases of context API

• Theming
• User Authentication / Current account
• Multilingual Support
• Routing
• Managing state
• Accessing data from external sources

What is a custom hook?

The hook is a special JavaScript function in React that can be reused which means the hook used at any time and as many times as we want. Custom Hooks is a JavaScript function. the naming convention is it starts with "use" ( 'useSomething' ) because all other hooks in React used this naming convention like useState(), useEffect(), etc. Custom hooks can call other Hooks. They are functions that can be extracted from a component to reuse or simplify it. These functions have a state, which is stored by React. They are special and have specific rules to follow to avoid confusion.

What is useRef() and what is its purpose in React?

useRef is a hook provided by React, which returns a mutable ref object. A ref is a special object in React that allows us to store a reference to a particular component or element. The useRef hook allows us to create and maintain a reference to a value or a DOM element across re-renders of a component.

Here are some common use cases for useRef():

• Accessing the value of an input element
• Storing a value between renders
• Accessing a child component
• Creating a mutable object

What is useMemo() in React?

useMemo is a powerful hook in React that can help optimize the performance of our React applications. it can memoize the result of a function, for these reasons useMemo can avoid unnecessary recalculations of expensive operations. useMemo receives two arguments a function and an array as a dependencies list. when one of the dependencies changes the function is only executed. If none of the dependencies change, useMemo returns the cached value of the function's result from the previous render.

The most use-case of useMemo is to memoize expensive calculations, such as sorting or filtering a large list of data. Additionally, useMemo can be used to memorize the props of a component that are expensive to compute or change frequently.

Another advantage of useMemo is that it can be used to memorize callback functions that are passed down as props. By memorizing the callback function, we can prevent unnecessary re-renders of the child components if the callback function hasn't changed.