React ecosystem overview - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the React library in a functional component.

React

import [1] from 'react';

function MyComponent() {
  return <div>Hello React!</div>;
}

Drag options to blanks, or click blank then click option'

AComponent

BReact

CuseState

Drender

Attempts:

3 left

💡 Hint

Common Mistakes

Using named imports like 'Component' instead of default import.

Forgetting to import React at all.

You import the main React object using import React from 'react'; to use React features in your component.

2fill in blank

medium

Complete the code to declare a state variable using React hooks.

React

import React, { [1] } from 'react';

function Counter() {
  const [count, setCount] = [1](0);
  return <button>{count}</button>;
}

Drag options to blanks, or click blank then click option'

AuseState

BuseEffect

CuseContext

DuseRef

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'useEffect' instead of 'useState'.

Not destructuring the array returned by the hook.

The useState hook lets you add state to functional components.

3fill in blank

hard

Fix the error in the code to correctly use the useEffect hook for side effects.

React

import React, { useEffect } from 'react';

function Logger() {
  useEffect(() => {
    console.log('Component mounted');
  }, [1]);
  return <div>Check console</div>;
}

Drag options to blanks, or click blank then click option'

A{}

Bnull

C[]

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Passing an object or null instead of an array.

Omitting the second argument causing effect to run on every render.

Passing an empty array [] as the second argument to useEffect runs the effect only once after the component mounts.

4fill in blank

hard

Fill both blanks to create a context and provide it to child components.

React

import React, { createContext, [1] } from 'react';

const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value=[2]>
      <Child />
    </ThemeContext.Provider>
  );
}

Drag options to blanks, or click blank then click option'

AuseContext

B'dark'

C'light'

DuseState

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'useState' instead of 'useContext'.

Providing the wrong value string to the provider.

You import useContext to consume context later, and provide a value like 'dark' to the provider.

5fill in blank

hard

Fill all three blanks to create a memoized callback that updates state.

React

import React, { useState, [1], useCallback } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const increment = useCallback(() => {
    setCount(count [2] 1);
  }, [[3]]);
  return <button onClick={increment}>{count}</button>;
}

Drag options to blanks, or click blank then click option'

AuseEffect

B+

Ccount

DuseMemo

Attempts:

3 left

💡 Hint

Common Mistakes

Using '-' instead of '+'.

Leaving dependency array empty causing stale closures.

Importing wrong hooks.

useMemo is imported but not needed here; the correct hook to memoize is useCallback. The increment function adds 1 to count using +, and the dependency array includes count.