🔥React Excellence

1
// ReactTips.jsx
2

3
// Tip 1: Leverage `use` for fetching data in server components
4
// React 19 introduces the `use` hook for server components
5
import { use }from "react";
6

7
async function fetchUser() {
8
  const response = await fetch("/api/user");
9
  return response.json();
10
}
11

12
const UserProfile = async () => {
13
  // ✅ Use `use` for seamless data fetching in server components
14
  const user = await use(fetchUser());
15

16
  return (
17
    <div>
18
      <h1>{user.name}</h1>
19
      <p>Email: {user.email}</p>
20
    </div>
21
  );
22
};
23

24
// Tip 2: Use `<Suspense>` with server-side rendering (SSR)
25
import React, { Suspense } from "react";
26

27
const UserProfile = React.lazy(() => import("./UserProfile"));
28

29
const App = () => {
30
  return (
31
    <Suspense fallback={<p>Loading user profile...</p>}>
32
      <UserProfile />
33
    </Suspense>
34
  );
35
};
36

37
// Tip 3: Utilize the `useId` hook for unique IDs
38
import { useId } from "react";
39

40
const Form = () => {
41
  // ✅ useId ensures unique IDs across client and server
42
  const id = useId();
43

44
  return (
45
    <div>
46
      <label htmlFor={`${id}-input`}>Name:</label>
47
      <input id={`${id}-input`} type="text" />
48
    </div>
49
  );
50
};
51

52
// Tip 4: Optimize performance with `useTransition`
53
import { useState, useTransition } from "react";
54

55
const Search = ({ items }) => {
56
  const [searchTerm, setSearchTerm] = useState("");
57
  const [filteredItems, setFilteredItems] = useState(items);
58
  const [isPending, startTransition] = useTransition();
59

60
  const handleSearch = (event) => {
61
    const value = event.target.value;
62
    setSearchTerm(value);
63

64
    startTransition(() => {
65
      const filtered = items.filter((item) =>
66
        item.toLowerCase().includes(value.toLowerCase())
67
      );
68
      setFilteredItems(filtered);
69
    });
70
  };
71

72
  return (
73
    <div>
74
      <input type="text" value={searchTerm} onChange={handleSearch} />
75
      {isPending && <p>Loading...</p>}
76
      <ul>
77
        {filteredItems.map((item, index) => (
78
          <li key={index}>{item}</li>
79
        ))}
80
      </ul>
81
    </div>
82
  );
83
};
84

1
// ReactTips.jsx
2

3
// Tip 1: Use optional chaining to avoid errors when accessing deeply nested properties
4
const UserProfile = ({ user }) => {
5
  // ❌ Avoid this approach, it can cause runtime errors
6
  const city = user && user.address && user.address.city;
7

8
  // ✅ Use optional chaining for cleaner and safer code
9
  const city = user?.address?.city;
10

11
  return <p>City: {city || "Unknown"}</p>;
12
};
13

14
// Tip 2: Use functional updates when updating state that depends on previous state
15
import { useState } from "react";
16

17
const Counter = () => {
18
  const [count, setCount] = useState(0);
19

20
  // ❌ Avoid this, it might not reflect the latest state
21
  const increment = () => setCount(count + 1);
22

23
  // ✅ Use a functional update for more reliable state management
24
  const incrementFunctional = () => setCount((prevCount) => prevCount + 1);
25

26
  return (
27
    <div>
28
      <p>Count: {count}</p>
29
      <button onClick={incrementFunctional}>Increment</button>
30
    </div>
31
  );
32
};
33

1
// ReactTips.jsx
2

3
// Tip 1: Strings can be passed directly as props
4
const Input = () => {
5
  // ❌ Avoid doing this
6
  return <input placeholder={"Your name"} />;
7

8
  // ✅ Strings can be passed directly without {}
9
  return <input placeholder="Your name" />;
10
};
11

12
// Tip 2: Avoid passing `true` explicitly to boolean props
13
const Input = () => {
14
  // ❌ Avoid doing this
15
  return <input placeholder="Your name" disabled={true} />;
16

17
  // ✅ You only need to specify the property
18
  return <input placeholder="Your name" disabled />;
19
};
20

21
// Tip 3: Use Fragments (<></>) only when necessary
22
const Input = () => {
23
  // ❌ Don't do this, it's unnecessary
24
  return (
25
    <>
26
      <input placeholder="Your name" disabled />
27
    </>
28
  );
29

30
  // ✅ You can simply return the component
31
  return <input placeholder="Your name" disabled />;
32
};
33