Understanding React in 2 minutes: components, hooks and best practices!

Hello, passionate developer! Today, let's dive into React, the JavaScript library that's revolutionizing user interface development. In just a few minutes, you'll discover how to create modern and reactive web applications.

What exactly is React? 🤔

React is a JavaScript library developed by Facebook (Meta) that allows you to build composable and reusable user interfaces. Its fundamental principle? The Virtual DOM and a declarative approach that makes your code more predictable and easier to debug.

Components: the foundation of everything

In React, everything is a component. A component can be as simple as a button or as complex as an entire page. Here are different ways to create components:

jsx
1// Simple functional component
2const Welcome = ({ name }) => {
3  return <h1>Hello, {name}! 👋</h1>;
4};
5
6// Component with props and children
7const Card = ({ title, children }) => {
8  return (
9    <div className="card">
10      <h2>{title}</h2>
11      <div className="card-content">{children}</div>
12    </div>
13  );
14};
15
16// Usage
17const App = () => {
18  return (
19    <Card title="My first card">
20      <Welcome name="Developer" />
21      <p>Welcome to the world of React!</p>
22    </Card>
23  );
24};

State Management: the heart of reactivity 🧠

State is crucial in React. It allows your components to maintain and update their internal data.

jsx
1import { useState } from 'react';
2
3const Counter = () => {
4  const [count, setCount] = useState(0);
5  const [isActive, setIsActive] = useState(false);
6
7  const handleIncrement = () => {
8    setCount((prevCount) => prevCount + 1);
9    setIsActive(true);
10  };
11
12  return (
13    <div className="counter">
14      <p>Counter: {count}</p>
15      <p>Status: {isActive ? 'Active' : 'Inactive'}</p>
16      <button onClick={handleIncrement} className={isActive ? 'active' : ''}>
17        Increment
18      </button>
19    </div>
20  );
21};

Essential Hooks: beyond useState 🎣

useEffect: managing side effects

jsx
1import { useState, useEffect } from 'react';
2
3const WindowResizeTracker = () => {
4  const [windowSize, setWindowSize] = useState({
5    width: window.innerWidth,
6    height: window.innerHeight,
7  });
8
9  useEffect(() => {
10    // Event handler to update dimensions
11    const handleResize = () => {
12      setWindowSize({
13        width: window.innerWidth,
14        height: window.innerHeight,
15      });
16    };
17
18    // Add event listener
19    window.addEventListener('resize', handleResize);
20
21    // Cleanup function: VERY IMPORTANT
22    // Remove event listener when component unmounts
23    return () => {
24      window.removeEventListener('resize', handleResize);
25    };
26  }, []); // Empty dependency array because we want the effect only on mount
27
28  return (
29    <div className="window-size">
30      <h2>Window Dimensions:</h2>
31      <p>Width: {windowSize.width}px</p>
32      <p>Height: {windowSize.height}px</p>
33    </div>
34  );
35};
36
37// Another example: Timer with cleanup
38const Timer = () => {
39  const [seconds, setSeconds] = useState(0);
40  const [isRunning, setIsRunning] = useState(false);
41
42  useEffect(() => {
43    let intervalId;
44
45    if (isRunning) {
46      // Start timer
47      intervalId = setInterval(() => {
48        setSeconds((prevSeconds) => prevSeconds + 1);
49      }, 1000);
50    }
51
52    // Cleanup function
53    return () => {
54      if (intervalId) {
55        clearInterval(intervalId);
56      }
57    };
58  }, [isRunning]); // Triggers only when isRunning changes
59
60  const handleToggle = () => {
61    setIsRunning((prev) => !prev);
62  };
63
64  const handleReset = () => {
65    setIsRunning(false);
66    setSeconds(0);
67  };
68
69  return (
70    <div className="timer">
71      <h2>Timer</h2>
72      <p>Time elapsed: {seconds} seconds</p>
73      <button onClick={handleToggle}>{isRunning ? 'Pause' : 'Start'}</button>
74      <button onClick={handleReset}>Reset</button>
75    </div>
76  );
77};

useCallback and useMemo: performance optimization

jsx
1import { useCallback, useMemo } from 'react';
2
3const ExpensiveComponent = ({ items, onItemSelect }) => {
4  // Function memoization
5  const handleSelect = useCallback(
6    (id) => {
7      onItemSelect(id);
8    },
9    [onItemSelect],
10  );
11
12  // Expensive calculation memoization
13  const sortedItems = useMemo(() => {
14    return [...items].sort((a, b) => b.value - a.value);
15  }, [items]);
16
17  return (
18    <ul>
19      {sortedItems.map((item) => (
20        <li key={item.id} onClick={() => handleSelect(item.id)}>
21          {item.name}
22        </li>
23      ))}
24    </ul>
25  );
26};

Modern React Patterns 🎯

Custom Hooks: reusing logic

jsx
1// Custom hook for form management
2const useForm = (initialValues = {}) => {
3  const [values, setValues] = useState(initialValues);
4  const [errors, setErrors] = useState({});
5
6  const handleChange = useCallback((e) => {
7    const { name, value } = e.target;
8    setValues((prev) => ({ ...prev, [name]: value }));
9  }, []);
10
11  const resetForm = useCallback(() => {
12    setValues(initialValues);
13    setErrors({});
14  }, [initialValues]);
15
16  return {
17    values,
18    errors,
19    handleChange,
20    resetForm,
21  };
22};
23
24// Usage
25const LoginForm = () => {
26  const { values, handleChange, resetForm } = useForm({
27    email: '',
28    password: '',
29  });
30
31  const handleSubmit = (e) => {
32    e.preventDefault();
33    // Submission logic
34    console.log(values);
35    resetForm();
36  };
37
38  return (
39    <form onSubmit={handleSubmit}>
40      <input
41        type="email"
42        name="email"
43        value={values.email}
44        onChange={handleChange}
45      />
46      <input
47        type="password"
48        name="password"
49        value={values.password}
50        onChange={handleChange}
51      />
52      <button type="submit">Login</button>
53    </form>
54  );
55};

Best Practices and Tips 💡

1. Code Organization

   • Break your components into small, reusable units
   • Use custom hooks for reusable logic
   • Keep styles and tests close to components

2. Performance

   • Use React.memo() for purely presentational components
   • Avoid unnecessary re-renders with useCallback and useMemo
   • Implement code splitting with React.lazy and Suspense

3. Error Handling

   • Use Error Boundaries to catch errors
   • Implement appropriate error handling for API calls
   • Provide clear visual feedback to the user

Summary 🚀

React is a powerful tool that allows you to:

• Create reusable and maintainable components
• Efficiently manage your application's state
• Optimize performance with hooks
• Implement modern development patterns

With these solid foundations, you're ready to create robust and efficient React applications. Remember that practice is the key to mastery!

Thanks for following this guide! To go further, don't hesitate to check out the official React documentation and practice with concrete projects.