React Functions and Concepts: A Comprehensive Summary

4 minute read

0. JavaScript Syntax and Patterns in React

a) Arrow Functions

  • Concise way to define functions. 
      const handleLogout = () => {
      console.log('Logged out');
  };

b) Destructuring

  • Extracts properties from objects or arrays. 
    const { user, setUser } = props;

c) Template Literals

  • Embeds expressions into strings. 
    const message = `Welcome, ${user.displayName}`;

d) Promises and Async/Await

  • Handles asynchronous operations. 
    const fetchData = async () => {
    const data = await getData();
    console.log(data);
};

1. JSX Syntax

JSX (JavaScript XML) allows writing HTML-like code in JavaScript files, which React compiles into standard JavaScript objects.

  • Embeds expressions within curly braces ({}).
  • Returns a single parent element (e.g., a <div> wrapping other elements). 
    return (
    <div>
        <h1>Hello, {name}!</h1>
    </div>
);

2. React Functional Components

  • Functions that return JSX and accept props as an argument. 
    const Dashboard = ({ user, setUser }) => {
    const handleLogout = async () => {
        await signOut(auth);
        setUser(null); // Update the user state to null on logout
    };

    return (
        <div>
            <h1>Welcome, {user.displayName}</h1>
            <button onClick={handleLogout}>Logout</button>
        </div>
    );
};

3. Hooks

React hooks enable state and lifecycle features in functional components.

a) useState

  • Adds state to functional components.
  • Syntax: 
    const [state, setState] = useState(initialValue);

b) useEffect

  • Handles side effects like API calls, subscriptions, or DOM updates.
  • The dependencies array ensures the effect runs only when specified dependencies change.
  • If empty ([]), the effect runs once after the component mounts. 
    useEffect(() => {
    // Effect logic
    return () => {
        // Cleanup logic
    };
}, [dependencies]);
  • Example: 
    useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
        setUser(user || null);
    });

    return () => unsubscribe();
}, []);

4. React Router

  • Enables client-side navigation in a React app.
  • Key Components:
    • <Routes>: Contains all the app’s routes.
    • <Route>: Defines a specific route.
    • <Navigate>: Redirects users to a different route.
  • Example: 
    return (
    <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/dashboard" element={<Dashboard user={user} />} />
        <Route path="*" element={<Navigate to="/login" />} />
    </Routes>
);

5. Handling Events

  • Syntax: Events in React use camelCase and pass functions as handlers.
  • async marks a function as asynchronous.
    • An async function always returns a promise, even if you don’t explicitly return one.
  • await - Used inside an async function to pause execution until a promise resolves.
    • Allows writing asynchronous code in a way that looks synchronous, making it easier to read and debug. ```javascript const handleLogout = async () => { await signOut(auth); setUser(null); };

    return ( <button onClick={handleLogout}>Logout</button> );

    const fetchData = async () => { try { const querySnapshot = await getDocs(collection(db, “your-collection”)); const items = querySnapshot.docs.map((doc) => ({ id: doc.id, …doc.data() })); setData(items); setLoading(false); } catch (error) { console.error(“Failed to fetch data”, error); } }; ```

  • async: Marks fetchData as asynchronous.
  • await getDocs(…): Waits for the Firestore query to complete before proceeding.

6. Props

  • Short for “properties,” props are used to pass data between components. 
    const Greeting = ({ name }) => (
    <h1>Hello, {name}!</h1>
);

<Greeting name="John" />

7. Conditional Rendering

  • Dynamically displays content based on conditions. 
    return (
    <div>
        {user ? <Dashboard user={user} /> : <Login />}
    </div>
);

8. Firestore Integration

CRUD Operations

Fetching Data*

const fetchAccounts = async () => {
  const querySnapshot = await getDocs(collection(db, 'Accounts'));
  const accounts = querySnapshot.docs.map(doc => doc.data());
  setAccounts(accounts);
};

Adding Data

await addDoc(collection(db, 'Accounts'), { name: 'Savings', balance: 1000 });

Querying Data

const q = query(collection(db, 'Accounts'), where('balance', '>', 0));

Advanced Considerations and Best Practices in React and Firebase Projects

1. State Management

  • Context API or Redux: As your app grows, managing state with useState can become cumbersome.
  • Consider using Context API or Redux for global state management when multiple components need to share data.
    • Example: Manage user authentication state globally.
    • Libraries: redux, redux-toolkit, or react-context-api.

2. Error Handling

  • Ensure robust error handling, especially for API calls and Firebase interactions: 
    try {
  // Firestore query
} catch (error) {
  console.error("Error fetching data:", error);
  alert("Something went wrong. Please try again!");
}

2. Testing

  • Component Testing:
    • Use libraries like Jest and React Testing Library for unit and integration testing.
    • Test critical workflows like authentication, data fetching, and error handling.
  • End-to-End Testing:
    • Use tools like Cypress to test the entire user flow (e.g., login, CRUD operations, logout).

3. Performance Optimization

  • Lazy Loading Routes:
    • Use React.lazy and Suspense for lazy-loading routes: 
      const Login = React.lazy(() => import('./Login'));
const Dashboard = React.lazy(() => import('./Dashboard'));
  • Firestore Queries:
    • Use .limit() to fetch a subset of data instead of the entire collection.
    • Index Firestore fields for optimized queries.
  • Memoization:
    • Use React.memo, useMemo, and useCallback to avoid unnecessary re-renders: 
      const memoizedValue = useMemo(() => computeValue(data), [data]);

4. User Experience Enhancements

  • Loading Indicators:
    • Show loading spinners or skeleton screens during data fetching.
    • Example using React Suspense: 
      <Suspense fallback={<div>Loading...</div>}>
  <Dashboard />
</Suspense>
  • Error Boundaries:
    • Wrap critical components to catch runtime errors and show fallback UI: 
      class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

6. Code Maintainability

  • Folder Structure:
    • Organize files by feature or module (e.g., components/, pages/, services/).
    • Example: 
      src/
  components/
  pages/
  services/
  utils/
  • Reusable Components:
    • Write generic components for repeated UI patterns (e.g., modals, forms, buttons).
  • Documentation:
    • Document component props, expected behavior, and API usage for easy onboarding.

You may also enjoy