Practice React

import { useRef, useEffect } from "react";

export function PrevValue({ value }) {
  const prevRef = useRef(value);

  useEffect(() => {
    prevRef.current = value;
  });

  const prev = prevRef.current;

  return (
    <div>
      <p>Current: {value}</p>
      <p>Previous: {prev}</p>
    </div>
  );
}

import { useReducer } from "react";

function cartReducer(state, action) {
  switch (action.type) {
    case "add": {
      const existing = state.items.find(i => i.id === action.item.id);
      if (existing) {
        return {
          items: state.items.map(i =>
            i.id === action.item.id ? { ...i, qty: i.qty + 1 } : i
          )
        };
      }
      return { items: [...state.items, { ...action.item, qty: 1 }] };
    }
    case "remove":
      return { items: state.items.filter(i => i.id !== action.id) };
    case "clear":
      return { items: [] };
    default:
      throw new Error("Unknown action: " + action.type);
  }
}

const initialState = { items: [] };
const SAMPLE = [
  { id: 1, name: "React Book" },
  { id: 2, name: "TypeScript Guide" },
];

export function ShoppingCart() {
  const [cart, dispatch] = useReducer(cartReducer, initialState);
  const total = cart.items.reduce((sum, i) => sum + i.qty, 0);

  return (
    <div>
      <h2>Cart ({total} items)</h2>
      <ul>
        {cart.items.map(i => (
          <li key={i.id}>
            {i.name} x{i.qty}
            <button onClick={() => dispatch({ type: "remove", id: i.id })}>Remove</button>
          </li>
        ))}
      </ul>
      {SAMPLE.map(p => (
        <button key={p.id} onClick={() => dispatch({ type: "add", item: p })}>
          Add {p.name}
        </button>
      ))}
      <button onClick={() => dispatch({ type: "clear" })}>Clear cart</button>
    </div>
  );
}

import { lazy, Suspense, useState } from "react";

// In a real project this would be a separate file import
const SettingsPanel = lazy(() =>
  Promise.resolve({ default: function SettingsPanel() {
    return <div>Settings Panel</div>;
  }})
);

export function AppShell() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setOpen(o => !o)}>
        {open ? "Close Settings" : "Open Settings"}
      </button>
      {open && (
        <Suspense fallback={<p>Loading settings...</p>}>
          <SettingsPanel />
        </Suspense>
      )}
    </div>
  );
}

export function GreetingCard({ name, age }) {
  return (
    <div>
      <h2>Hello, {name}!</h2>
      <p>You are {age} years old.</p>
    </div>
  );
}

import { useState } from "react";

export function ToggleButton() {
  const [on, setOn] = useState(false);

  return (
    <button onClick={() => setOn(!on)}>
      {on ? "ON" : "OFF"}
    </button>
  );
}

export function FruitList({ fruits }) {
  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit}>{fruit}</li>
      ))}
    </ul>
  );
}

import { useState } from "react";

export function SearchBox() {
  const [query, setQuery] = useState("");

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search..."
      />
      <p>Searching for: {query}</p>
    </div>
  );
}

import { useState, useEffect } from "react";

export function UserCard({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true);
    fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
      .then((res) => res.json())
      .then((data) => {
        setUser(data);
        setLoading(false);
      });
  }, [userId]);

  if (loading) return <p>Loading...</p>;

  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

import { useState } from "react";

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = localStorage.getItem(key);
      return item !== null ? JSON.parse(item) : initialValue;
    } catch {
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      const valueToStore =
        value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error(error);
    }
  };

  return [storedValue, setValue];
}

export function ColorPicker() {
  const [color, setColor] = useLocalStorage("color", "#ff0000");

  return (
    <div>
      <label htmlFor="color">Pick a colour:</label>
      <input
        id="color"
        type="color"
        value={color}
        onChange={(e) => setColor(e.target.value)}
      />
      <p>Current colour: <code>{color}</code></p>
    </div>
  );
}