Functional Components

Last Updated :
Discuss
Comments

Question 1

Which hook allows a functional component to behave like componentDidMount?

  • useState()

  • useReducer()

  • useEffect(() => {}, [])

  • useCallback()

Question 2

What happens if you call a hook inside a conditional block in a functional component?

  • React throws an error

  • The hook runs only when the condition is true

  • The hook is ignored

  • The app behaves unpredictably but does not crash

Question 3

Consider the code below. What will be printed in the console?

function Demo() {

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

console.log("Rendered");

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

}


  • “Rendered” printed once

  • "Rendered” on every button click

  • “Rendered” printed twice on first render

  • Nothing happens on click

Question 4

Why should reusable components avoid side effects like API calls?

  • API calls crash apps

  • Side effects reduce reusability

  • React disallows fetch

  • Props can’t handle side effects

Question 5

How can you update data in a functional component?

  • By directly modifying props

  • By using this.setState

  • By using hooks like useState

  • By reloading the browser

Question 6

What will be the output of the following code?

JavaScript 
const Greeting = (props) => {
    return <h1>Hello, {props.name}!</h1>;
};
<Greeting name="Sandeep" />

  • Hello, Sandeep!

  • Hello, undefined!

  • Greeting: Sandeep

  • Error: props is not defined

Question 7

What is the output of the following React functional component?

JavaScript 
const ItemList = (props) => {
    return (
        <ul>
            {props.items.map((item, index) => <li key={index}>{item}</li>)}
        </ul>
    );
};
<ItemList items={['Apple', 'Banana', 'Cherry']} />

  • Apple Banana Cherry

  • <ul><li>Apple</li><li>Banana</li><li>Cherry</li></ul>

  • Apple, Banana, Cherry

  • Error: map is not a function

Question 8

What does "props" refer to in the context of React functional components?

  • A way to manage component state

  • A built-in function that triggers re-renders

  • An object used to pass data and event handlers to components

  • A way to define local component methods

Question 9

What will be the output of the following functional component?

JavaScript 
const HelloWorld = () => {
    const [text, setText] = useState("Hello");
    useEffect(() => {
        setText("World");
    }, []);
    return <div>{text}</div>;
};
export default HelloWorld;

  • Hello

  • World

  • Error: Invalid state update

  • undefined

Question 10

What will be the output of this React component?

JavaScript 
import React, { useState } from 'react';
const ToggleButton = () => {
    const [isOn, setIsOn] = useState(false);

    return (
        <button onClick={() => setIsOn(!isOn)}>
            {isOn ? "ON" : "OFF"}
        </button>
    );
};
export default ToggleButton;

  • The button will toggle between "ON" and "OFF" every time it's clicked.

  • The button will always show "ON".

  • The button will always show "OFF".

  • The component will throw an error because of useState.

There are 10 questions to complete.

Take a part in the ongoing discussion