Rocket Jobs

Blog

Q.1 When should you use context API?

Context API is a way of passing props or data to every level of the component tree without doing the props drilling. It reduces the complexity of passing props to every single component until it reaches its destination component. With the help of context API now we can pass data through all the components and the destination component can easily receive this data using a hook called useContext.

There are 4 steps to using React context API:

Create a context using the createContext method.

export const ContextName = createContext(default value);

Take our created context and wrap the context provider around our context tree.

<ContextName.Provider value=” ”>
<Component1 />
<Component2 />
<Component3 />
<ContextName>

Create a context using the createContext method.

<ContextName.Provider value=” any valid JS value ”>

Create a context using the createContext method.

export const ContextName = createContext(default value);

Q.2 What is a custom hook?

Custom hooks are those hooks that are made by use not by React. When we have some common lines of code that need to be used by multiple components, then instead of writing the same code in every component we can extract those codes and make a custom hook. And replace those codes with our custom-made code.

Q.3 What is useRef?

useRef is a React hook that creates a mutable variable which not re-render the component on every change. useRef returns a ref object with a single property initially set to the initial value we provided. On the next renders, useRef will return the same object. If we change a ref it does not trigger a re-render. That’s why it is perfect for storing information that doesn’t affect the visual output of our component.

Syntax:

const ref = useRef ( initialValue )

Q.4 What is useMemo?

useMemo is a React hook that memorized the result of a calculation between re-renders. It is used to increase the performance of a React app. If there is an expensive task on the website this hook will memorize the expensive task and only use that expensive task when needed instead of using it on every re-render.

Syntax:

const variableName = useMemo( calculate value that needed to memorized, dependencies )

Rocket Jobs

There are many variations of passages of
Lorem Ipsum , but the majority have suffered
alteration in some form.

Company

About Us

Work

Product

Prototype

Plans & Pricing

Customers

Integrations

Support

Help Desk

Sales

Become a Partner

Developers

Contact

524 Broadway , NYC

+1 777 - 978 - 5570