⚛️ React MCQ Questions

import React, { useState, useEffect } from 'react';

function ToggleMe() {
  useEffect(() => {
    console.log('ToggleMe mounted');
    return () => {
      console.log('ToggleMe unmounted');
    };
  }, []);
  return <div>I am here</div>;
}

function App() {
  const [show, setShow] = useState(false);
  return (
    <div>
      <button onClick={() => setShow(!show)}>Toggle</button>
      {show && <ToggleMe />}
    </div>
  );
}
// Assume App is rendered, 'Toggle' clicked once, then clicked a second time.

import React from 'react';

function Item({ text }) {
  console.log(`Rendering Item: ${text}`);
  return <li>{text}</li>;
}

function List() {
  const items = ['Apple', 'Banana', 'Cherry'];
  return (
    <ul>
      {items.map((item) => (
        <Item text={item} />
      ))}
    </ul>
  );
}
// Assume List component is rendered.

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    const timerId = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    console.log('Timer started');

    return () => {
      clearInterval(timerId);
      console.log('Timer cleared');
    };
  }, []);

  return <div>Count: {count}</div>;
}

import React, { useState } from 'react';

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

  const incrementDirect = () => {
    setCount(count + 1);
    setCount(count + 1); 
  };

  const incrementUpdater = () => {
    setCount(prevCount => prevCount + 1);
    setCount(prevCount => prevCount + 1); 
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementDirect}>Direct Increment</button>
      <button onClick={incrementUpdater}>Updater Increment</button>
    </div>
  );
}
// Assume UpdaterComponent is rendered, then the 'Updater Increment' button is clicked once.

import React, { useState, useEffect } from 'react';

function EffectComponent() {
  const [data, setData] = useState('initial');

  useEffect(() => {
    console.log('Effect ran');
  }, []);

  return <button onClick={() => setData('updated')}>Change Data</button>;
}
// Assume EffectComponent is rendered, then the button is clicked.

import React, { useState, useEffect } from 'react';

function StaleClosureComponent() {
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    const id = setTimeout(() => {
      console.log('Counter value in timeout:', counter);
    }, 1000);

    return () => clearTimeout(id);
  }, []); 

  const increment = () => {
    setCounter(counter + 1);
  };

  return (
    <div>
      <p>Current Counter: {counter}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}
// Assume StaleClosureComponent is rendered, then the 'Increment' button is clicked twice.

import React, { useState, useCallback, memo } from 'react';

const ChildComponent = memo(({ onClick }) => {
  console.log('ChildComponent rendered');
  return <button onClick={onClick}>Click Me</button>;
});

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

  const handleClick = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []); 

  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent onClick={handleClick} />
    </div>
  );
}
// Assume ParentComponent is rendered, then the button is clicked once.

import React, { useState } from 'react';

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

  const handleClick = () => {
    setCount(count + 1);
    console.log(count); 
  };

  return <button onClick={handleClick}>{count}</button>;
}
// Assume Counter component is rendered and the button is clicked once.

import React, { useRef } from 'react';

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

  const handleClick = () => {
    if (inputRef.current) {
      inputRef.current.focus();
      console.log('Input focused');
    }
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}
// Assume FocusInput component is rendered and the button is clicked once.

import React, { createContext, useState, useContext } from 'react';

const MyContext = createContext(0);

function Child() {
  const value = useContext(MyContext);
  console.log('Child rendered with value:', value);
  return <div>{value}</div>;
}

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

  return (
    <MyContext.Provider value={count}>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Child />
    </MyContext.Provider>
  );
}
// Assume Parent component is rendered, then the 'Increment' button is clicked once.