🟡 Set 2: Medium (A Little Harder)

1. What are controlled and uncontrolled components?
👉 Controlled components are form elements whose values are controlled by React state.
👉 Uncontrolled components manage their own state using the DOM directly (via refs).

2. What is lifting state up in React?
👉 Moving the state from a child component to a common parent component so that multiple children can share and sync data.

3. How do you make an API call in React?
👉 You usually use useEffect to make API calls using fetch or axios.

useEffect(() => {
  fetch('api_url')
    .then(res => res.json())
    .then(data => setData(data));
}, []);

4. What is Context API in React?
👉 It is a way to pass data deeply through the component tree without manually passing props at every level.

5. How do you use useContext?
👉 useContext lets you access context data directly inside a functional component.

const value = useContext(MyContext);

6. What is a custom hook?
👉 A function starting with use that extracts reusable logic from components.

function useCounter() {
  const [count, setCount] = useState(0);
  return { count, setCount };
}

7. What are keys in a list in React and why are they important?
👉 Keys are unique IDs given to list items so React can identify and track which items change, update, or are removed.

8. What is prop drilling?
👉 Passing props down multiple levels of components even if intermediate components don’t need them.

9. How do you prevent a component from re-rendering unnecessarily?
👉 Use React.memo, useMemo, useCallback, or optimize the code structure to avoid extra renders.

10. How can you memoize a component in React?
👉 Using React.memo(Component) to prevent unnecessary re-renders when props don’t change.

11. What is useRef hook used for?
👉 To reference DOM elements or keep a mutable variable that doesn’t cause re-render when updated.

12. How do you access an input element’s value using useRef?
👉

const inputRef = useRef();
console.log(inputRef.current.value);

13. What is the difference between useEffect and useLayoutEffect?
👉 useEffect runs after the paint (asynchronous), useLayoutEffect runs before the paint (synchronously).

14. What is the purpose of React.StrictMode?
👉 It helps find potential problems in an application by activating additional checks and warnings in development mode.

15. What are Higher-Order Components (HOC)?
👉 A function that takes a component and returns a new enhanced component.

const Enhanced = higherOrderComponent(WrappedComponent);

16. What is the difference between a Presentational and a Container component?
👉 Presentational components focus on how things look, container components focus on how things work (data, state).

17. What are default props?
👉 Default values provided to props if none are supplied by the parent.

MyComponent.defaultProps = {
  name: 'Guest'
};

18. How can you create a lazy-loaded component in React?
👉 Using React.lazy() and Suspense.

const MyComponent = React.lazy(() => import('./MyComponent'));

19. What is Suspense in React?
👉 A component that lets you “wait” for something (like lazy loading) before rendering fallback content.

<Suspense fallback={<div>Loading...</div>}>
<MyComponent />
</Suspense>

20. How do you handle forms in React?
👉 By using controlled components, useState to store values, and handling onChange and onSubmit events.

21. What happens if you don’t use keys in a list rendering?
👉 React will have trouble identifying which items changed, leading to inefficient re-renders and bugs.

22. What is the purpose of children prop?
👉 It allows components to receive and render nested elements or components passed between opening and closing tags.

<MyComponent>
  <p>Hello</p>
</MyComponent>

23. What is Server-Side Rendering (SSR)?
👉 It means rendering a React app on the server instead of in the browser for better SEO and faster load times.

24. How do you optimize React performance?
👉 Techniques like code splitting, lazy loading, memoization (React.memo, useMemo), and avoiding unnecessary re-renders.

25. How to handle errors in React components?
👉 Using Error Boundaries — special components that catch JavaScript errors during rendering.

class ErrorBoundary extends React.Component {
  componentDidCatch(error, info) {
    // Handle the error
  }
  render() {
    return this.props.children;
  }
}