3 Important Things Every React Developer Should Know

React is a popular tool for building websites. To be a good React developer, you need to keep learning new things. Let's look at three important ideas that can help you write better React code.

1. Use the children Prop to Make Your App Faster

The children prop is not just for putting things inside other things. It's a powerful tool that can make your React app work better and faster.

Here's why the children prop is useful:

• It helps you pass information to components more easily
• It lets you change parts of your app without breaking other parts
• It can stop parts of your app from updating when they don't need to

Let's look at an example:

// Not so good way
function Dashboard() {
  const [time, setTime] = useState(new Date());
  
  useEffect(() => {
    const timer = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);

  return (
    <div>
      <h1>{time.toTimeString()}</h1>
      <SlowComponent />
    </div>
  );
}

// Better way
function App() {
  return (
    <Dashboard>
      <SlowComponent />
    </Dashboard>
  );
}

function Dashboard({ children }) {
  const [time, setTime] = useState(new Date());
  
  useEffect(() => {
    const timer = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);

  return (
    <div>
      <h1>{time.toTimeString()}</h1>
      {children}
    </div>
  );
}
        

In the better way, SlowComponent doesn't update every second when the time changes. This makes your app faster.

2. Know When to Use Refs Instead of State

In React, you can store information in two ways: state and refs. Knowing when to use each one is important.

Use refs when:

- The information doesn't need to show on the screen

• You want to remember something between updates, but don't want to cause an update
• You're working with timers or directly with parts of the webpage

Here's an example of a timer using state and ref:

// Using state (not as good)
function Timer() {
  const [time, setTime] = useState(0);
  const [isRunning, setIsRunning] = useState(false);
  const [timerId, setTimerId] = useState(null);

  useEffect(() => {
    if (isRunning) {
      const id = setInterval(() => setTime(t => t + 1), 1000);
      setTimerId(id);
    } else {
      clearInterval(timerId);
    }
    return () => clearInterval(timerId);
  }, [isRunning]);

  const toggleTimer = () => setIsRunning(!isRunning);

  return (
    <div>
      <p>Time: {time} seconds</p>
      <button onClick={toggleTimer}>{isRunning ? 'Stop' : 'Start'}</button>
    </div>
  );
}

// Using ref (better)
function Timer() {
  const [time, setTime] = useState(0);
  const [isRunning, setIsRunning] = useState(false);
  const timerIdRef = useRef(null);

  useEffect(() => {
    if (isRunning) {
      timerIdRef.current = setInterval(() => setTime(t => t + 1), 1000);
    } else {
      clearInterval(timerIdRef.current);
    }
    return () => clearInterval(timerIdRef.current);
  }, [isRunning]);

  const toggleTimer = () => setIsRunning(!isRunning);

  return (
    <div>
      <p>Time: {time} seconds</p>
      <button onClick={toggleTimer}>{isRunning ? 'Stop' : 'Start'}</button>
    </div>
  );
}
        

Using a ref for the timer ID stops unnecessary updates and makes your app work better.

3. Use Named Exports to Make Your Code Easier to Manage

When you create a component in React, you can export it in two ways. Using named exports is often better than default exports.

Here's why named exports are good:

• They make it easier to change your code later
• They help your code editor give you better suggestions
• They keep the names of your components the same everywhere in your project

Let's look at the two ways:

// Default export (not as good)
const Button = ({ children, onClick }) => (
  <button onClick={onClick}>{children}</button>
);
export default Button;

// How to use it
import Button from './Button';

// Named export (better)
export const Button = ({ children, onClick }) => (
  <button onClick={onClick}>{children}</button>
);

// How to use it
import { Button } from './Button';
        

Named exports make it easier to keep your code organized and consistent.

Conclusion

By learning these three things - using the children prop smartly, choosing between refs and state wisely, and using named exports - you can write better React code. Remember, becoming a good React developer means always learning new things. Keep practicing and have fun coding!

Thanks for reading! If you want to read more of my articles, you can find them here. Feel free to get in touch.

I always enjoy talking and sharing experiences with other developers.