Self-Assessment: Can You Answer These Questions?

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? 

• 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.

// 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).

What is hydration in React?

// 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?

// 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.

// 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