Interview Questions For 𝐅𝐫𝐨𝐧𝐭𝐞𝐧𝐝 𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫 (𝐑𝐞𝐚𝐜𝐭 𝐉𝐒) 🚀 based on several interview compilation by Asim MahmoodAsim Mahmood

interview_reactjs.md

Interview Questions For 𝐅𝐫𝐨𝐧𝐭𝐞𝐧𝐝 𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫 (𝐑𝐞𝐚𝐜𝐭 𝐉𝐒) 🚀 based on several interview compilation by Asim MahmoodAsim Mahmood

1. Program to Reverse a String Without Using reverse()

function reverseString(str) {
  let reversed = "";
  for (let i = str.length - 1; i >= 0; i--) {
    reversed += str[i];
  }
  return reversed;
}
console.log(reverseString("React")); // Output: tcaeR

---

2. What is a Generator Function in JavaScript?

A generator function is a special type of function that can pause and resume execution. It is defined using function* syntax and produces an iterator.

How It Works:

• Use yield to pause and return a value.
• Resume execution using the iterator's next() method.

function* generatorExample() {
  yield "First";
  yield "Second";
  yield "Third";
}
const gen = generatorExample();
console.log(gen.next().value); // "First"
console.log(gen.next().value); // "Second"
console.log(gen.next().value); // "Third"

---

3. Explain Closures in JavaScript

A closure is a function that "remembers" the variables from its lexical scope, even after the outer function has executed.

function outerFunction(outerVar) {
  return function innerFunction(innerVar) {
    return `Outer: ${outerVar}, Inner: ${innerVar}`;
  };
}
const closureFunc = outerFunction("React");
console.log(closureFunc("JS")); // Output: "Outer: React, Inner: JS"

---

4. What Are Higher-Order Components in React?

A higher-order component (HOC) is a function that takes a component and returns a new component with added functionality.

const withExtraProps = (WrappedComponent) => (props) => {
  return <WrappedComponent extraProp="Hello" {...props} />;
};

---

5. State vs Props in React

• State: Managed within the component, mutable, used for dynamic rendering.
• Props: Passed from parent to child, immutable, used to pass data.

---

6. What Is a Callback Function?

A callback function is a function passed as an argument to another function and is executed later.

function greet(callback) {
  console.log("Hello");
  callback();
}
greet(() => console.log("World")); // Output: Hello World

---

7. Spread Operator in JavaScript

The spread operator (...) expands arrays or objects.

const arr = [1, 2, 3];
const newArr = [...arr, 4];
console.log(newArr); // [1, 2, 3, 4]

---

8. Shallow vs Deep Copy

• Shallow Copy: Copies only top-level properties.

  const obj = { a: 1, b: { c: 2 } };
  const shallowCopy = { ...obj };
  shallowCopy.b.c = 3;
  console.log(obj.b.c); // 3

• Deep Copy: Copies all levels.

  const deepCopy = JSON.parse(JSON.stringify(obj));

---

9. Virtual DOM in React

The Virtual DOM is a lightweight representation of the real DOM. React uses it to optimize rendering by updating only changed elements.

---

10. React Hooks

Hooks allow using state and lifecycle methods in functional components.

• Common Hooks: useState, useEffect, useMemo, useCallback, useContext.

---

11. useMemo vs React.memo

• useMemo: Memoizes the value of a computation.
• React.memo: Prevents re-rendering of a component unless props change.

---

12. useCallback and useMemo Examples

• useCallback:

  const memoizedCallback = useCallback(() => console.log("Callback"), []);

• useMemo:

  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

---

13. Timer Functionality

function Timer() {
  const [seconds, setSeconds] = useState(0);
  const [timer, setTimer] = useState(null);

  const start = () => setTimer(setInterval(() => setSeconds((s) => s + 1), 1000));
  const stop = () => clearInterval(timer);

  return (
    <>
      <div>{seconds}s</div>
      <button onClick={start}>Start</button>
      <button onClick={stop}>Stop</button>
    </>
  );
}

---

14. Lifecycle with Hooks

useEffect(() => {
  console.log("Component Mounted");
  return () => console.log("Component Unmounted");
}, []);

---

15. Pass Data from Child to Parent

Use a callback function.

function Parent() {
  const handleData = (data) => console.log(data);
  return <Child sendData={handleData} />;
}

function Child({ sendData }) {
  return <button onClick={() => sendData("Hello Parent!")}>Send</button>;
}

---

16. Copy State for Immutability

React relies on immutability for efficient re-renders.

---

17. Why Redux?

Redux provides a predictable state container for managing global state in large applications.

---

18. Middlewares in Redux

Middlewares allow side effects, like API calls or logging, during the Redux action lifecycle.

---

19. Controlled vs Uncontrolled Components

• Controlled: Value is controlled via state.
• Uncontrolled: Value managed by DOM.

---

20. How Reducers Work

A reducer is a pure function returning new state based on the current state and action.

const reducer = (state, action) => {
  switch (action.type) {
    case "INCREMENT":
      return { count: state.count + 1 };
    default:
      return state;
  }
};

---

21. Prevent Re-Rendering

Use React.memo or useMemo.

---

22. Context API

Provides a way to share values between components without prop-drilling.

---

23. Share Data Across Components

• Context API
• Props
• State Management Libraries (Redux)

---

24. React Optimization Techniques

• Memoization
• Lazy Loading
• Code Splitting
• Debouncing

---

25. Lazy Loading Example

const LazyComponent = React.lazy(() => import("./LazyComponent"));

---

26. Prevent Unnecessary Re-Renders

Use React.memo, useCallback, or useMemo.

---

27. Basic Unit Test

import { render, screen } from "@testing-library/react";
import MyComponent from "./MyComponent";

test("renders the component", () => {
  render(<MyComponent />);
  expect(screen.getByText("Hello")).toBeInTheDocument();
});

---

28. Check If an Object Is Empty

const isEmpty = (obj) => Object.keys(obj).length === 0;

---

29. Bootstrap Experience

Bootstrap simplifies responsive design. It provides prebuilt classes for layouts, grids, and components like buttons and modals.

the questions

1. Write a program to reverse a string without using the reverse() method.
2. What is a generator function in JavaScript? How does it work?
3. Explain closures in JavaScript.
4. What are higher-order components in React?
5. Explain the difference between state and props in React.
6. What is a Callback function?
7. Explain the spread operator in JavaScript.
8. What is the difference between a shallow copy and a deep copy? How do you create each type in JavaScript?
9. What is the Virtual DOM in React, and how does it help?
10. What are hooks in React? Name some commonly used hooks.
11. Explain useMemo and React.memo, and describe the differences between them.
12. What are the use cases for useCallback and useMemo? Provide examples.
13. Implement a timer functionality that has start and stop buttons.
14. Write code to handle lifecycle events in functional components using hooks.
15. How would you pass data from a child component to a parent component in React?
16. Why do we need to create a copy of the state when updating it in React?
17. Why is a state management library, like Redux, often used in React applications?
18. What are middlewares in Redux, and why are they important?
19. Difference between controlled component and Uncontrolled component.
20. How do reducers work in Redux, and how would you create one?
21. How can you prevent a component from re-rendering in React?
22. What is the Context API in React? How does it work?
23. How would you share data across multiple components in React?
24. What are some optimization techniques for React applications?
25. How does lazy loading work in React? Implement an example of it.
26. How would you prevent unnecessary re-renders of a component?
27. Write basic unit test cases for a component.
28. How would you check if an object is empty in JavaScript?
29. Have you worked with Bootstrap in your projects? If so, describe your experience.