Table of contents
    blog cover

    [PART 1] Unlocking React Interview: Key Questions and In-Depth Answers

    Web Development
    Web Development
    Interview
    Interview
    React.js is one of the most popular JavaScript libraries for building user interfaces. Whether you're a seasoned developer or just starting out, understanding the core concepts of React is crucial for interviews and real-world applications. This blog post will guide you through some common React interview questions and provide detailed explanations and examples.

    Self-Assessment: Can You Answer These Questions?

    Before diving into the explanations, take a moment to see if you can answer these questions on your own:
    1. What is react and react-dom packages? Why does React need these two separate packages?
    2. What is the Virtual DOM? When does React update the real DOM?
    3. What is hydration in React?
    4. What is the key prop?
    5. When should you use useCallback, useMemo, and React.memo?

    What is react and react-dom packages? 

    Why does React need these two separate packages?

    • react: This package contains the core functionality of React, including the React component API.
    • react-dom: This package is responsible for rendering React components to the DOM and handling updates.

    The separation allows React to be more modular and supports rendering to different environments like the web (react-dom) and mobile (react-native).

    A typical React application
    // language: javascript
    import React from 'react';
    import ReactDOM from 'react-dom';
    
    function App() {
      return <h1>Hello, World!</h1>;
    }
    
    ReactDOM.render(<App />, document.getElementById('root'));

    What is the Virtual DOM? 

    The Virtual DOM is a lightweight, in-memory representation of the actual DOM. React uses this to determine what changes need to be made to the real DOM.

    React updates the real DOM after it compares the new Virtual DOM with the previous version and identifies the changes (a process known as reconciliation).

    Virtual DOM Ref: https://www.geeksforgeeks.org/reactjs-virtual-dom/

    What is hydration in React?

    Hydration is the process of attaching event listeners to the existing server-rendered HTML. It is used in server-side rendering (SSR) to make the static HTML interactive.

    Server-side rendering example with hydration
    // language: javascript
    import React from 'react';
    import ReactDOM from 'react-dom/server';
    
    const App = () => <h1>Hello, World!</h1>;
    
    // On the server
    const html = ReactDOM.renderToString(<App />);
    
    // On the client
    ReactDOM.hydrate(<App />, document.getElementById('root'));

    What is the key prop?

    The key prop helps React identify which items have changed, are added, or are removed. It is crucial for maintaining stable identity across re-renders.
    // language: javascript
    const ItemList = ({ items }) => {
      return (
        <ul>
          {items.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      );
    };

    When should you use useCallback, useMemo, and React.memo?

    • useCallback: Returns a memoized callback function. Useful for passing stable references to child components to prevent unnecessary re-renders.
    • useMemo: Returns a memoized value. Useful for expensive calculations that don’t need to be recalculated on every render.
    • React.memo: Higher-order component that prevents re-rendering if the props have not changed.

    In the future, React Compiler will automatically memoizes your code. https://react.dev/learn/react-compiler#what-does-the-compiler-do
    // language: javascript
    import React, { useCallback, useMemo, memo } from 'react';
    
    const ExpensiveComponent = memo(({ calculate }) => {
      const result = calculate();
      return <div>Result: {result}</div>;
    });
    
    const ParentComponent = () => {
      const [count, setCount] = React.useState(0);
    
      const calculate = useCallback(() => {
        // Expensive calculation
        return count * 2;
      }, [count]);
    
      const memoizedValue = useMemo(() => calculate(), [calculate]);
    
      return (
        <div>
          <button onClick={() => setCount(count + 1)}>Increment</button>
          <ExpensiveComponent calculate={calculate} />
          <div>Memoized Value: {memoizedValue}</div>
        </div>
      );
    };

    Conclusion

    Understanding these core concepts and their practical applications can significantly improve your React.js skills and prepare you for interviews. Keep practicing and exploring more advanced topics to stay ahead in your React journey. 
    Happy coding!
    Created at 2024-06-17 21:16:52 +0700

    Related blogs