Week 9: APIs and Advanced Hooks

INFO 253A: Front-end Web Architecture

Kay Ashaolu

React Chapter 7: APIs and HTTP Requests

Introduction to Client-Side Applications

Current State:
- Complete client-side application
- Feedback items are hardcoded
- Data stored only in memory
Limitations:
- Cannot persist data beyond the UI
- No backend interaction for data storage

Understanding Backend APIs and Databases

Databases:
- Data is usually stored in databases like MySQL, PostgreSQL, MongoDB
Backend API:
- Interacts with the database
- Fetches and manipulates data
- Returns data as JSON
Backend Technologies:
- Languages: Node.js, Python, PHP, C#, etc.
- Frameworks: Express (Node.js), Django (Python), Laravel (PHP)

Building a Mock Backend with JSON Server

What is JSON Server?
- Acts as a mock backend API
- Allows us to make HTTP requests
- Stores data in a db.json file
Benefits:
- Quick setup without writing actual backend code
- Can be replaced with a real backend later

HTTP Requests Basics

Client-Server Communication:
- Client (React app) makes requests to the server
- Server responds with data, usually in JSON format
HTTP Methods:
- GET: Retrieve data
- POST: Submit new data
- PUT/PATCH: Update existing data
- DELETE: Remove data

RESTful APIs and Endpoint Structure

REST API:
- Representational State Transfer
- Architectural style for designing networked applications
Endpoint Examples:
- GET /feedback - Retrieve all feedback items
- GET /feedback/{id} - Retrieve a specific item
- POST /feedback - Add a new item
- PUT /feedback/{id} - Update an item
- DELETE /feedback/{id} - Delete an item

HTTP Status Codes Overview

1xx Informational:
- Request received, continuing process
2xx Success:
- 200 OK: Successful request
- 201 Created: Resource created successfully
3xx Redirection:
- Further action needs to be taken
4xx Client Errors:
- 400 Bad Request: Client-side error
- 404 Not Found: Resource not found
5xx Server Errors:
- 500 Internal Server Error: Server-side error

Setting Up JSON Server

Installation:
- Run npm install json-server
Creating db.json:
- Example structure:

   {
     "feedback": [
       {
         "id": 1,
         "rating": 10,
         "text": "This is feedback item 1 coming from the backend"
       },
       {
         "id": 2,
         "rating": 9,
         "text": "This is feedback item 2 coming from the backend"
       },
       {
         "id": 3,
         "rating": 8,
         "text": "This is feedback item 3 coming from the backend"
       }
     ]
   }

Testing JSON Server with Postman

Using Postman:
- Tool for testing HTTP requests
Example Requests:
- GET Request:
  - URL: http://localhost:5000/feedback
  - Retrieves all feedback items
- POST Request:
  - URL: http://localhost:5000/feedback
  - Body:

     {
       "rating": 8,
       "text": "New feedback item"
     }
     ```

Running Client and Server Concurrently

Problem:
- Need to run React app and JSON Server simultaneously
Solution:
- Use concurrently package
Installation:
- Run npm install concurrently
Update package.json:
- Add the following scripts:

   "scripts": {
     "server": "json-server --watch db.json --port 5000",
     "client": "react-scripts start",
     "dev": "concurrently \"npm run server\" \"npm run client\""
   }

Fetching Data from the Backend in React

Using useEffect Hook:
- Fetch data when the component mounts
Example Code:

 useEffect(() => {
   fetch('/feedback?_sort=id&_order=desc')
     .then(response => response.json())
     .then(data => setFeedback(data));
 }, []);

Managing State:
- Use useState to manage feedback data

   const [feedback, setFeedback] = useState([]);

Implementing a Loading Spinner

Loading State:
- Use a state variable isLoading to track loading status

   const [isLoading, setIsLoading] = useState(true);

Updating Loading State:
- Set isLoading to false after data is fetched

   fetchData().then(() => setIsLoading(false));

Displaying Spinner:
- Conditional rendering based on isLoading

   {isLoading ? <Spinner /> : <FeedbackList feedback={feedback} />}

Adding Data and Setting Up a Proxy

Adding Feedback:
- Use fetch with POST method

   fetch('/feedback', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json'
     },
     body: JSON.stringify(newFeedback)
   })
     .then(response => response.json())
     .then(data => setFeedback([...feedback, data]));

Automatic ID Assignment:
- JSON Server auto-increments IDs
- No need to generate IDs manually

Updating and Deleting Data from JSON Server

Updating Feedback:
- Use fetch with PUT method

   fetch(`/feedback/${id}`, {
     method: 'PUT',
     headers: {
       'Content-Type': 'application/json'
     },
     body: JSON.stringify(updatedFeedback)
   })
     .then(response => response.json())
     .then(data => {
       // Update state with new data
     });

Updating and Deleting Data from JSON Server

Deleting Feedback:
- Use fetch with DELETE method

   fetch(`/feedback/${id}`, { method: 'DELETE' })
     .then(() => {
       // Remove item from state
     });

Importance of Understanding Web Architecture

Holistic View:
- Essential to understand frontend-backend interaction
- Facilitates better application design decisions
Performance Optimization:
- Efficient data fetching reduces load times
- Enhances user experience
Scalability:
- Well-architected applications handle growth effectively
- Easier maintenance and feature addition

Full-Stack Application Flow

Client-Side (Frontend):
- User interface built with React
- Manages state and user interactions
Server-Side (Backend):
- API endpoints handle requests
- Interacts with database to persist data
Communication:
- HTTP requests sent from client to server
- JSON data exchanged between frontend and backend

React Chapter 12: More Advanced React Hooks

useRef
useMemo
useCallback
Custom Hooks

useRef Hook - Overview and Example 1

useRef returns a mutable ref object with a .current property.
Used for:
- Accessing DOM elements directly.
- Storing mutable values that persist across renders.
Example 1: Creating a DOM reference to manipulate or access a DOM element.

Code Sample: useRef to Access DOM Element

import { useRef } from 'react';

function UseRefExample1() {
  const inputRef = useRef();

  const onSubmit = e => {
    e.preventDefault();
    console.log(inputRef.current.value);
    inputRef.current.value = '';
    inputRef.current.focus();
  };

  return (
    <form onSubmit={onSubmit}>
      <label>Name:</label>
      <input type="text" ref={inputRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

export default UseRefExample1;

useRef Example 2: Accessing Previous State

useRef can store previous state values without causing re-renders.
Useful for comparing current and previous state.

Code Sample: useRef to Access Previous State

import { useState, useEffect, useRef } from 'react';

function UseRefExample2() {
  const [name, setName] = useState('');
  const prevName = useRef('');

  useEffect(() => {
    prevName.current = name;
  }, [name]);

  return (
    <div>
      <input
        value={name}
        onChange={e => setName(e.target.value)}
        placeholder="Enter your name"
      />
      <h2>Current Name: {name}</h2>
      <h2>Previous Name: {prevName.current}</h2>
    </div>
  );
}

export default UseRefExample2;

useRef Example 3: Fixing Memory Leak Errors

Avoid setting state on unmounted components.
Use useRef to track if a component is mounted.
Useful in asynchronous operations like fetch requests.

useRef to Fix Memory Leak

import { useState, useEffect, useRef } from 'react';

function UseRefExample3() {
  const [data, setData] = useState(null);
  const isMounted = useRef(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch('https://api.example.com/data');
        if (isMounted.current) {
          const result = await res.json();
          setData(result);
        }
      } catch (error) {
        console.error(error);
      }
    };

    fetchData();

    return () => {
      isMounted.current = false;
    };
  }, []);

  return <div>{data ? <div>{data.title}</div> : 'Loading...'}</div>;
}

export default UseRefExample3;

useMemo Hook - Overview and Example

useMemo memoizes the result of an expensive function.
Returns a memoized value.
Recomputes only when dependencies change.
Useful for performance optimization.

useMemo to Optimize Performance

import { useState, useMemo } from 'react';

function UseMemoExample() {
  const [number, setNumber] = useState(0);
  const [inc, setInc] = useState(0);

  const sqrt = useMemo(() => {
    console.log('Expensive function called');
    return Math.sqrt(number);
  }, [number]);

  const onClick = () => {
    setInc(prevInc => prevInc + 1);
  };

  return (
    <div>
      <h2>Square Root of {number}: {sqrt}</h2>
      <input
        type="number" value={number}
        onChange={e => setNumber(Number(e.target.value))}
      />
      <button onClick={onClick}>Re-render</button>
      <p>Renders: {inc}</p>
    </div>
  );
}

export default UseMemoExample;

useCallback Hook - Overview and Example

useCallback returns a memoized callback function.
Prevents functions from being recreated on every render.
Useful when passing callbacks to optimized child components.

Code Sample: useCallback with Child Component

// UseCallbackExample.js
import { useState, useCallback } from 'react';
import Button from './Button';

function UseCallbackExample() {
  const [tasks, setTasks] = useState([]);

  const addTask = useCallback(() => {
    setTasks(prevTasks => [...prevTasks, 'New Task']);
  }, [setTasks]);

  return (
    <div>
      <Button addTask={addTask} />
      {tasks.map((task, index) => (
        <p key={index}>{task}</p>
      ))}
    </div>
  );
}

export default UseCallbackExample;

Code Sample: useCallback with Child Component

// Button.js
import React from 'react';

function Button({ addTask }) {
  console.log('Button rendered');
  return (
    <button onClick={addTask}>Add Task</button>
  );
}

export default React.memo(Button);

Custom Hooks - Introduction

Custom Hooks allow you to extract component logic into reusable functions.
Must start with the "use" prefix.
Can use built-in hooks inside custom hooks.

Custom Hook 1: useFetch

Simplifies data fetching logic.
Handles loading, error, and data states.
Reusable across components.

Code Sample: useFetch Hook

// useFetch.js
import { useState, useEffect } from 'react';

function useFetch(url, options) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    const abortCont = new AbortController();

    const fetchData = async () => {
      try {
        const res = await fetch(url, { ...options, signal: abortCont.signal });
        if (!res.ok) throw new Error('Network response was not ok');
        const json = await res.json();
        setData(json);
        setLoading(false);
      } catch (err) {
        if (err.name !== 'AbortError') {
          setError(err);
          setLoading(false);
        }
      }
    };

Code Sample: useFetch Hook

    fetchData();

    return () => abortCont.abort();
  }, [url, options]);

  return { data, loading, error };
}

export default useFetch;


// Usage in a component
import useFetch from './useFetch';

function CustomHookExample1() {
  const { data, loading, error } = useFetch('https://jsonplaceholder.typicode.com/posts', {});

  if (loading) return <h3>Loading...</h3>;
  if (error) return <h3>Error: {error.message}</h3>;

  return (
    <ul>
      {data.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

export default CustomHookExample1;

Custom Hook 2: useLocalStorage

Syncs state with local storage.
Persists data between sessions.
Used similarly to the useState hook.

useLocalStorage Hook

// useLocalStorage.js
import { useState } from 'react';

function useLocalStorage(key, initialValue) {
  const [localStorageValue, setLocalStorageValue] = useState(() => {
    try {
      const itemFromStorage = window.localStorage.getItem(key);
      return itemFromStorage ? JSON.parse(itemFromStorage) : initialValue;
    } catch (err) {
      console.log(err);
      return initialValue;
    }
  });

  const setValue = value => {
    try {
      const valueToStore =
        value instanceof Function ? value(localStorageValue) : value;
      setLocalStorageValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (err) {
      console.log(err);
    }
  };

  return [localStorageValue, setValue];
}

export default useLocalStorage;

Conclusion

Advanced hooks optimize React applications.
useRef, useMemo, and useCallback enhance performance.
Custom Hooks promote code reusability and cleaner components.