Javascript Programming Tutorials, Guides & Best Practices

In src/App.js:

import React from 'react';
import UserList from './features/users/components/UserList';

function App() {
  return (
    <div>
      <h1>User Management</h1>
      <UserList />
    </div>
  );
}

export default App;

• Setting Breakpoints:

In Chrome DevTools, you can set a breakpoint by clicking on the line number in the Sources panel. When the code execution reaches that line, it will pause, allowing you to inspect the current state.

• Dependency Array: Ensure that you include only necessary dependencies in the dependency array to prevent unnecessary effect executions.
• Cleanup: Use cleanup functions in useEffect to avoid memory leaks, especially when dealing with subscriptions or event listeners.

import React, { useEffect } from 'react';

function EffectComponent({ userId }) {
  useEffect(() => {
    const fetchUserData = async () => {
      const response = await fetch(`/api/user/${userId}`);
      const data = await response.json();
      console.log(data);
    };

    fetchUserData();

    return () => {
      console.log('Cleanup code');
    };
  }, [userId]);

  return <div>User ID: {userId}</div>;
}