What is a component in React - Practice Questions & Exercises

Challenge - 5 Problems

🧠 Conceptual

intermediate

What does a React component represent?

In React, what does a component mainly represent?

A A reusable piece of UI that can have its own logic and appearance

B A function that directly manipulates the browser's DOM elements

C A database where React stores user data

D A CSS style sheet that controls the look of the app

💡 Hint

Think about how React builds parts of the screen.

A React component is like a building block of the user interface. It can be reused and can have its own logic and look.

❓ component_behavior

intermediate

What will this React component render?

Given this React component, what will it display on the screen?

React

function Greeting() {
  return <h1>Hello, friend!</h1>;
}

A A paragraph with the text 'Hello, friend!'

B A button labeled 'Hello, friend!'

C A heading with the text 'Hello, friend!'

D An empty screen with no text

💡 Hint

Look at the HTML tag used inside the return statement.

The component returns an

element with the text 'Hello, friend!', so it will render a heading with that text.

❓ state_output

advanced

What is the output after clicking the button twice?

Consider this React component. What will be the displayed count after clicking the button two times?

React

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

A Count: undefined

B Count: 1

C Count: 0

D Count: 2

💡 Hint

Each click increases the count by 1.

The initial count is 0. Each button click adds 1. After two clicks, count is 2.

📝 Syntax

advanced

Which option correctly defines a React functional component?

Which of the following code snippets correctly defines a React functional component named 'Welcome' that returns a greeting?

A const Welcome = () => <h2>Welcome!</h2>;

B function Welcome() { <h2>Welcome!</h2>; }

C function Welcome() { <h2>Welcome!</h2> }

D const Welcome = () => { <h2>Welcome!</h2> }

💡 Hint

Remember that a component must return JSX to render.

Option A correctly defines a functional component using an arrow function with an implicit return of JSX.

❓ lifecycle

expert

What happens when the dependency array is empty in useEffect?

In React, what is the behavior of a useEffect hook with an empty dependency array like this? useEffect(() => { console.log('Effect ran'); }, []);

A The effect runs only when the component unmounts.

B The effect runs only once after the component mounts.

C The effect never runs.

D The effect runs after every render of the component.

💡 Hint

Think about when React runs effects with no dependencies.

An empty dependency array means the effect runs once after the component appears on screen (mount).