Q1. What Are React Hooks?

These are in-built functions that allow developers to use state and lifecycle methods within components in React. Each component’s lifecycle has 3 phases which are mount, unmount, and update. Alongside that, components have states and properties. Hooks allow developers to use these methods whilst improving code reuse with greater flexibility navigating the component tree.

Q2. What is the primary benefit of Hooks?

Through Hooks, you can code in React without using classes. With Hooks, you can reuse existing states in your code plus easily test them later on for errors and bugs in the code. Through the use of Hooks, you can tightly couple logic in the code on React.

Q3. What Are The 2 Rules You Must Follow While Using Hooks?

There are 2 rules which are imposed while you are coding with Hooks:

React Hooks should only be called at the Top Level. They shouldn’t be called inside loops, nested functions or conditions.
Hooks can only be called from React Function Components.

Q4. What is the difference between setState() and useEffect() in React?

Simply put, setState() allows programmers to set the state of functional components whereas the useEffect() method allows programmers to use lifecycle methods to React.

Q5. Explain State Hook with an example

State Hooks are primarily used to refer to the states of the components in React and can be used to change them on the runtime as per the functionality of your web application. An example below increments a counter on click of a button:

function Counter() {

  const [count, setCount] = useState(0)

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Increment Counter
      </button>
    </div>
  )
}

In the above example, we declare a constant count whose state initially is 0. Depending on how many times the button on the webpage is clicked, the count variable will be incremented that many times.

Q6. Is it possible to use both classes and Hooks in my React Code?

While Hooks cannot be a part of classes, you can use both within your React Web applications as you wish. Existing React applications will continue to work fine and there are no plans of removing classes from React in the near future. However, Hooks offer greater flexibility and easier code understanding therefore your company or organization should quickly transition to it.

Q7. Do Hooks work with static typing?

Static typing is a process of checking code during compile time to ensure that all variables are statically typed. Hooks are primarily functions and have been designed in a way to ensure that all attributes are statically typed. You can also use the React API with custom Hooks if you want to enforce stricter static typing within your code.

Q8. What functionalities that are provided by classes and are not covered by Hooks yet?

The following methods have not been introduced in Hooks yet:

getSnapshotBeforeUpdate
getDerivedStateFromError
componentDidCatch

These are uncommon lifecycles, however. Furthermore, Hooks may not be compatible with certain third-party libraries.

Q9. How do you use multiple states with Hooks?

The example below illustrates the use of multiple states with React Hooks:

function MultipleStates() {
  // Declare multiple state variables!
  const [car_model, setModel] = useState(1998);
  const [car_name, setName] = useState('Toyota Corolla');
  const [car_price, setPrice] = useState(600000);
  // ...
}

As you can see, we have declared multiple states within a single function. We have the car price, model, and name in a single function MultipleStates() above.

Q10. Explain Effect Hook with an example

If an action is performed on a webpage, an Effect Hook may be used to transfer a side effect to another part of the DOM. The example below updates the document title of the webpage when a button is clicked:

function Effect() {
  const [car, setcar] = useState('Ferrari');
  useEffect(() => {

    document.title = `My favorite car is ${car}`;
  });

  return (
    <div>
      <p>My favorite car is {car}</p>
      <button onClick={() => setcar('McLaren')}>
        Not this one?
      </button>
    </div>
  );
}

The above example changes the favorite car of the user from Ferrari to McLaren upon the click of a button. The effect of the change is also transferred using useEffect()to the document title and it is also updated simultaneously.

In essence, useEffect() is replacing componentDidMount and componentDidUpdate in this code.

Top 10 Interview Questions Related To React Hooks