React Interview Questions & Answers

const name = 'React Developer';
const element = <h1>Hello, {name}!</h1>;

// This JSX is transpiled to:
// const element = React.createElement('h1', null, 'Hello, ', name, '!');

// Parent Component
function Welcome() {
  return <Greeting name="Alice" />;
}

// Child Component
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

function ButtonClicker() {
  const handleClick = (event) => {
    alert('Button clicked!');
    console.log(event.target); // The DOM element that triggered the event
  };

  return (
    <button onClick={handleClick}>
      Click Me
    </button>
  );
}

function UserGreeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <h1>Welcome back!</h1>
      ) : (
        <h1>Please sign up.</h1>
      )}
    </div>
  );
}

import React from 'react';

function MyComponent() {
  return (
    <>
      <h1>Title</h1>
      <p>This is a paragraph.</p>
    </>
  );
}

// Without Fragment, you'd need a div:
// <div>
//   <h1>Title</h1>
//   <p>This is a paragraph.</p>
// </div>

npx create-react-app my-app

yarn create react-app my-app

// Reusable Button component
function Button({ onClick, children, type = 'button' }) {
  return (
    <button type={type} onClick={onClick}>
      {children}
    </button>
  );
}

// Usage:
// <Button onClick={handleSave}>Save</Button>
// <Button type="submit">Submit Form</Button>

const products = [
  { id: 1, name: 'Laptop' },
  { id: 2, name: 'Mouse' },
];

function ProductList() {
  return (
    <ul>
      {products.map(product => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

import React from 'react';

function App() {
  return (
    <React.StrictMode>
      <MyComponent />
    </React.StrictMode>
  );
}

    // Functional Component
    function Welcome(props) { return <h1>Hello, {props.name}</h1>; }
    

    // React Element (returned by a component or written directly as JSX)
    const element = <Welcome name="Alice" />;
    // This is equivalent to:
    // const element = React.createElement(Welcome, { name: "Alice" });
    

// Old way (React 17 and below)
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));

// New way (React 18+)
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

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

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]); // Re-run effect only when count changes

  return (
    <button onClick={() => setCount(count + 1)}>
      Increment ({count})
    </button>
  );
}

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

const ThemeContext = createContext('light');

function MyComponent() {
  const theme = useContext(ThemeContext);
  return <p>Current theme: {theme}</p>;
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <MyComponent />
    </ThemeContext.Provider>
  );
}

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

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

function MyComponent() {
  const [count, setCount] = useState(0);
  const expensiveValue = useMemo(() => {
    // Some heavy calculation based on count
    return count * 2;
  }, [count]);

  const handleClick = useCallback(() => {
    setCount(c => c + 1);
  }, []); // Empty dependency array means this function reference never changes

  return (
    <div>
      <p>Count: {count}</p>
      <p>Expensive Value: {expensiveValue}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

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

    const [state, dispatch] = useReducer(reducer, initialState);
    

function withLogger(WrappedComponent) {
  return function WithLogger(props) {
    console.log(`Component ${WrappedComponent.name} rendered.`);
    return <WrappedComponent {...props} />;
  };
}

const MyComponentWithLogger = withLogger(MyComponent);

import React, { useState } from 'react';

function Toggle(props) {
  const [on, setOn] = useState(false);
  const toggler = () => setOn(!on);
  return props.render({ on, toggler }); // The render prop is called here
}

function App() {
  return (
    <Toggle render={({ on, toggler }) => (
      <div>
        {on ? 'ON' : 'OFF'}
        <button onClick={toggler}>Toggle</button>
      </div>
    )} />
  );
}

    function ControlledForm() {
      const [value, setValue] = useState('');
      return (
        <input type="text" value={value} onChange={e => setValue(e.target.value)} />
      );
    }
    

    function UncontrolledForm() {
      const inputRef = useRef(null);
      const handleSubmit = () => alert(inputRef.current.value);
      return (
        <form onSubmit={handleSubmit}>
          <input type="text" ref={inputRef} />
          <button type="submit">Submit</button>
        </form>
      );
    }
    

import { useState, useEffect } from 'react';

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
}

// Usage in a component:
// function MyComponent() {
//   const width = useWindowWidth();
//   return <p>Window width: {width}px</p>;
// }

// Parent Component
function Parent() {
  const [sharedData, setSharedData] = useState('');
  return (
    <div>
      <SiblingA data={sharedData} />
      <SiblingB onDataChange={setSharedData} />
    </div>
  );
}

// Sibling A receives data as prop
function SiblingA({ data }) { return <p>Data from SiblingB: {data}</p>; }

// Sibling B sends data up via callback
function SiblingB({ onDataChange }) {
  return <button onClick={() => onDataChange('Hello from B')}>Send Data</button>;
}

// Incorrect (mutates state directly)
// const [items, setItems] = useState(['A', 'B']);
// items.push('C');
// setItems(items);

// Correct (creates new array)
const [items, setItems] = useState(['A', 'B']);
setItems(prevItems => [...prevItems, 'C']);

// Functional Component with default props via destructuring
function Button({ label = 'Click Me', color = 'blue' }) {
  return <button style={{ backgroundColor: color }}>{label}</button>;
}

// Functional Component with static defaultProps (older syntax, still valid)
// Button.defaultProps = {
//   label: 'Click Me',
//   color: 'blue'
// };

// Usage:
// <Button /> // Renders a blue button with 'Click Me'
// <Button label="Submit" /> // Renders a blue button with 'Submit'

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

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUser = async () => {
      try {
        setLoading(true);
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) throw new Error('Network response was not ok.');
        const data = await response.json();
        setUser(data);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };
    fetchUser();
  }, [userId]); // Re-fetch if userId changes

  if (loading) return <div>Loading user...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!user) return <div>No user found.</div>;

  return <div><h1>{user.name}</h1><p>{user.email}</p></div>;
}

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

function Home() { return <h2>Home Page</h2>; }
function About() { return <h2>About Page</h2>; }

import React from 'react';

const MyPureComponent = React.memo(function MyPureComponent({ data }) {
  console.log('MyPureComponent rendered');
  return <div>{data}</div>;
});

// If 'data' prop doesn't change, 'MyPureComponent rendered' won't log on parent re-renders.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Caught an error:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

// Usage:
// <ErrorBoundary><MyProblematicComponent /></ErrorBoundary>

import React, { lazy, Suspense } from 'react';

// Lazy load MyComponent
const MyLazyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <div>
      <h1>Welcome</h1>
      <Suspense fallback={<div>Loading component...</div>}>
        <MyLazyComponent />
      </Suspense>
    </div>
  );
}

    import { create } from 'zustand'
    const useStore = create((set) => ({
      count: 0,
      inc: () => set((state) => ({ count: state.count + 1 })),
    }))
    function Counter() {
      const { count, inc } = useStore()
      return <button onClick={inc}>{count}</button>
    }
    

    // Example with RTL
    import { render, screen } from '@testing-library/react';
    import Button from './Button';
    test('renders a button with text', () => {
      render(<Button>Click Me</Button>);
      expect(screen.getByText(/click me/i)).toBeInTheDocument();
    });