ReactJS Essentials: Components, State u0026 Hooks Quiz Quiz

1. Component Definition

   Which of the following is the correct way to define a functional component in React?

   1. A) function MyComponent = () =u003E { return u003Cdivu003EHellou003C/divu003E; }
   2. B) const MyComponent = { return u003Cdivu003EHellou003C/divu003E; }
   3. C) const MyComponent = function() { return u003Cdivu003EHellou003C/divu003E; }
   4. D) class MyComponent extends React.Component { render() { return u003Cdivu003EHellou003C/divu003E; } }
   5. E) const MyComponent = () =u003E { return u003Cdivu003EHellou003C/divu003E; }

2. Props Usage

   How do you pass data from a parent component to a child component in React?

   1. A) Using the 'transfer' attribute.
   2. B) Using 'state' directly.
   3. C) Using 'props'.
   4. D) Using 'context' globally.
   5. E) Using 'inject' method.

3. State Management

   Which hook is used to manage state within a functional component?

   1. A) useReducer()
   2. B) useContext()
   3. C) useState()
   4. D) useMemo()
   5. E) useEffect()

4. Event Handling Syntax

   In React, how do you bind an event handler to an element?

   1. A) u003Cbutton onclick={this.handleClick()}u003EClick Meu003C/buttonu003E
   2. B) u003Cbutton on-click={this.handleClick()}u003EClick Meu003C/buttonu003E
   3. C) u003Cbutton event='onClick' handler={this.handleClick}u003EClick Meu003C/buttonu003E
   4. D) u003Cbutton onClick={this.handleClick}u003EClick Meu003C/buttonu003E
   5. E) u003Cbutton onAction={this.handleClick()}u003EClick Meu003C/buttonu003E

5. useEffect Dependency Array

   What is the purpose of the dependency array in the useEffect hook?

   1. A) To specify the initial state.
   2. B) To determine which props should be updated.
   3. C) To indicate which values, when changed, should trigger the effect.
   4. D) To define the cleanup function.
   5. E) To optimize the effect's re-rendering frequency.

6. Component Re-rendering

   What can cause a React component to re-render?

   1. A) Only when the parent component re-renders.
   2. B) Only when the 'forceUpdate' function is called.
   3. C) Changes to its props, state, or when its parent re-renders.
   4. D) When a global variable changes.
   5. E) Only on initial mount.

7. Custom Hooks

   What is the primary benefit of using custom hooks in React?

   1. A) They automatically optimize performance.
   2. B) They allow you to write CSS directly within your components.
   3. C) They enable reusable stateful logic between components.
   4. D) They replace class components entirely.
   5. E) They provide direct access to the DOM.

8. State Immutability

   Why is it important to update state immutably in React?

   1. A) It prevents memory leaks.
   2. B) It makes the code shorter.
   3. C) It allows React to efficiently detect changes and optimize re-renders.
   4. D) It automatically handles event binding.
   5. E) It's required for Server Side Rendering.

9. Event Handling Scope

   In a class component, how do you ensure that 'this' is correctly bound within an event handler?

   1. A) Always use arrow functions for event handlers directly in the JSX.
   2. B) Use the 'bind' method in the constructor or use arrow functions as class properties.
   3. C) Use the 'apply' method within the render function.
   4. D) It's not necessary; 'this' is always correctly bound.
   5. E) Define all event handlers as global functions.

10. Performance Optimization

    Which hook can be used to memoize the result of a computationally expensive function?

    1. A) useReducer
    2. B) useCallback
    3. C) useState
    4. D) useMemo
    5. E) useContext