React js Hooks Introduction Practice Questions with Solutions

By /

Introduction

React Hooks aise functions hain jo function components ko React features use karne ki ability dete hain, jaise state, effects aur context. Hooks ke saath modern React applications mein function components ke andar state aur other React features manage kiye ja sakte hain. Common Hooks mein useState, useEffect, useContext, useRef, useMemo aur useCallback include hain. Is chapter mein hum Hooks ke basic concepts aur practical examples solve karenge. React js Hooks Introduction Practice questions with solutions help to understand the concepts.

1. What are Hooks in React?

Answer:

Hooks special functions hain jo function components ko React features use karne dete hain.

For example, useState ka use component mein state manage karne ke liye hota hai.

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>

      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
}

export default Counter;

Yahan:

useState(0)

component ko state manage karne ki ability provide karta hai.

2. Why were React Hooks introduced?

Answer:

Hooks ne function components ke andar state aur other React features ko use karna simpler banaya.

Hooks se pehle stateful logic ko commonly class components ke through manage kiya jata tha. Modern React mein function components aur Hooks primary approach hain.

For example:

function App() {
  const [name, setName] = useState("");

  return (
    <input
      value={name}
      onChange={(event) => setName(event.target.value)}
    />
  );
}

Is approach se component logic ko function-based structure mein organize karna easy hota hai.

3. What is useState Hook?

Answer:

useState Hook component mein state add karne ke liye use hota hai.

Example:

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>{count}</h2>

      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
}

export default App;

Yahan:

const [count, setCount] = useState(0);
  • count current state value hai.
  • setCount state update karne ka function hai.
  • 0 initial state hai.

useState ko next chapters mein detail mein cover kiya jayega.

4. What is the useEffect Hook?

Answer:

useEffect Hook component ke external systems ke saath synchronization jaise side-effect logic ke liye use hota hai.

Example:

import { useEffect } from "react";

function App() {
  useEffect(() => {
    console.log("Component rendered");
  }, []);

  return (
    <h2>Hello React</h2>
  );
}

export default App;

Yahan:

useEffect(() => {
  console.log("Component rendered");
}, []);

effect ko component ke lifecycle ke context mein run karne ke liye use kiya gaya hai.

useEffect ko upcoming chapters mein detail mein cover kiya jayega.

5. What is the useContext Hook?

Answer:

useContext Hook React Context se data read karne ke liye use hota hai.

Example:

import { createContext, useContext } from "react";

const ThemeContext = createContext("light");

function App() {
  const theme = useContext(ThemeContext);

  return <p>Theme: {theme}</p>;
}

export default App;

Yahan:

useContext(ThemeContext)

Context se current value read karta hai.

Context aur useContext ko later chapters mein detail mein cover kiya jayega.

6. What is the useRef Hook?

Answer:

useRef Hook aisi value ko hold karne ke liye use kiya ja sakta hai jo renders ke beech persist kare, aur DOM element ko reference karne ke liye bhi commonly use hota hai.

Example:

import { useRef } from "react";

function App() {
  const inputRef = useRef(null);

  function focusInput() {
    inputRef.current.focus();
  }

  return (
    <div>
      <input ref={inputRef} />

      <button onClick={focusInput}>
        Focus Input
      </button>
    </div>
  );
}

export default App;

Yahan:

ref={inputRef}

input element ka reference inputRef mein available karata hai.

7. What are useMemo and useCallback Hooks?

Answer:

useMemo aur useCallback performance optimization ke specific cases mein useful Hooks hain.

useMemo

useMemo calculation ke result ko memoize karne ke liye use kiya ja sakta hai.

import { useMemo } from "react";

function App() {
  const numbers = [10, 20, 30, 40];

  const total = useMemo(() => {
    return numbers.reduce(
      (sum, number) => sum + number,
      0
    );
  }, []);

  return <p>Total: {total}</p>;
}

export default App;

useCallback

useCallback function definition ko memoize karne ke liye use kiya ja sakta hai.

import { useCallback } from "react";

function App() {
  const handleClick = useCallback(() => {
    console.log("Button clicked");
  }, []);

  return (
    <button onClick={handleClick}>
      Click
    </button>
  );
}

export default App;

In Hooks ka use blindly nahi karna chahiye. Ye specific performance scenarios mein useful hote hain.

8. What are the Rules of Hooks in React?

Answer:

React Hooks ke kuch important rules hain.

Rule 1: Hooks ko top level par call karein

Hook ko if, loop ya nested function ke andar directly call nahi karna chahiye.

❌ Incorrect:

if (isLoggedIn) {
  const [name, setName] = useState("");
}

✅ Correct:

function App() {
  const [name, setName] = useState("");

  if (!name) {
    return <p>Please enter your name.</p>;
  }

  return <p>Hello {name}</p>;
}

Rule 2: Hooks ko React functions ke context mein call karein

Hooks ko function component ya custom Hook ke top level par call karna chahiye.

Ye rules React ko Hooks ke stateful behavior ko consistently track karne mein help karte hain.

9. What is a Custom Hook in React?

Answer:

Custom Hook ek reusable JavaScript function hota hai jo React Hooks ko use karta hai.

Custom Hook ka naam generally use se start hota hai.

Example:

import { useState } from "react";

function useCounter() {
  const [count, setCount] = useState(0);

  function increase() {
    setCount((previousCount) => previousCount + 1);
  }

  return {
    count,
    increase
  };
}

function App() {
  const { count, increase } = useCounter();

  return (
    <div>
      <p>Count: {count}</p>

      <button onClick={increase}>
        Increase
      </button>
    </div>
  );
}

export default App;

Yahan:

useCounter()

ek custom Hook hai.

Custom Hooks ka main purpose reusable stateful logic ko multiple components ke beech share karna hai.

10. Build a Practical Counter using React Hooks.

Answer:

Ab ek simple counter application banate hain using the useState Hook.

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  function increase() {
    setCount((previousCount) => previousCount + 1);
  }

  function decrease() {
    setCount((previousCount) => previousCount - 1);
  }

  function reset() {
    setCount(0);
  }

  return (
    <div>
      <h2>Counter</h2>

      <p>Count: {count}</p>

      <button onClick={decrease}>
        Decrease
      </button>

      <button onClick={reset}>
        Reset
      </button>

      <button onClick={increase}>
        Increase
      </button>
    </div>
  );
}

export default Counter;

How this works:

State create ki gayi hai:

const [count, setCount] = useState(0);

Increase function previous state ke basis par update karta hai:

setCount((previousCount) => previousCount + 1);

Decrease bhi functional updater use karta hai:

setCount((previousCount) => previousCount - 1);

Reset button state ko directly 0 par set karta hai:

setCount(0);

Ye simple example React Hooks ka basic practical use demonstrate karta hai.

Key Takeaways

  • Hooks React ke special functions hain.
  • Hooks function components ko state aur other React features use karne dete hain.
  • useState state manage karne ke liye use hota hai.
  • useEffect external systems ke saath synchronization jaise side-effect logic ke liye use hota hai.
  • useContext Context se data read karne ke liye use hota hai.
  • useRef persistent values aur DOM references ke liye useful hai.
  • useMemo aur useCallback specific performance optimization cases mein useful hain.
  • Hooks ko top level par call karna chahiye.
  • Hooks ko conditions aur loops ke andar directly call nahi karna chahiye.
  • Custom Hooks reusable stateful logic share karne ke liye banaye ja sakte hain.
  • Modern React development mein function components aur Hooks widely used approach hain.

FAQs

1. What are React Hooks?

React Hooks are special functions that allow function components to use React features such as state, effects, context, and refs.

2. Which Hook is used to manage state?

The useState Hook is used to add and manage state in a function component.

3. Which Hook is commonly used for effects?

The useEffect Hook is commonly used for synchronizing a component with external systems and handling side-effect logic.

4. Can Hooks be called inside an if statement?

No. Hooks should be called at the top level of a function component or custom Hook, not conditionally inside an if statement.

5. What is a Custom Hook?

A Custom Hook is a reusable JavaScript function that can use React Hooks and share stateful logic between components.

6. Why should Hooks be called at the top level?

Consistent Hook call order allows React to correctly associate Hook calls with their stored state and other information between renders.

7. Are all React Hooks used for performance optimization?

No. Hooks have different purposes. For example, useState manages state, useEffect handles synchronization with external systems, useContext reads context, and useRef holds persistent values or references. Hooks such as useMemo and useCallback are specifically related to memoization and performance optimization.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top