You Are Using useState Wrong (and how to fix it)

Summary

In this video, the speaker dives into best practices for managing state in React applications. They explain when to use React's internal state, when to leverage refs for internal values that don’t need re-renders, and how to persist state in the URL using tools like useQueryState. By breaking down complex concepts into simpler examples, the speaker highlights the importance of performance optimization and component reusability. They emphasize a strong understanding of React's tools to create more efficient, maintainable applications. Ultimately, this video aims to improve developers' mental models for handling state and effects in React.

Takeaways

• 😀 Use `useState` for state that needs to trigger re-renders in the UI and be part of the component's state.
• 😀 Avoid using `useState` for values that don’t need to be rendered, as it can lead to unnecessary re-renders.
• 😀 For persistent state that should survive page reloads, consider using `useQueryState` with the URL, which syncs state with the URL.
• 😀 The URL can serve as a state manager using `useQueryState`, allowing users to share links and refresh pages without losing state.
• 😀 Use `useRef` for internal values or state that don’t need to be displayed or trigger re-renders in the UI.
• 😀 Using `useRef` prevents unnecessary re-renders, making it more efficient for managing internal, non-UI state like counters or timers.
• 😀 Components should be small, reusable, and focused on a single responsibility to improve maintainability and readability.
• 😀 Avoid using `useState` unnecessarily for values that don’t impact the rendered UI, as it adds extra overhead.
• 😀 React developers must adopt a mental model that includes knowing when to use state, effects, refs, and other tools effectively.
• 😀 React’s state management can be costly in terms of performance; knowing when to avoid it can lead to more efficient applications.
• 😀 Learning when to use state, effects, refs, and other React tools is essential for becoming a better React developer.

Q & A

Why should we avoid using state in React for certain scenarios?

State in React triggers re-renders every time it is updated, which can lead to unnecessary performance costs. It should only be used for values that need to be displayed or interacted with in the UI. For values that don't need to trigger re-renders, using alternatives like `useRef` is more efficient.

What is the problem with using `useState` for non-UI-related values?

Using `useState` for values that don't affect the UI causes unnecessary re-renders. This is because state changes cause React to re-render the component to reflect the new state, even if the value isn't needed in the UI, wasting resources.

What is `useQueryState` and why is it beneficial?

`useQueryState` is a library that allows state to be managed through the URL. This makes the state persistent even after a page reload and allows users to share URLs with the same state. It makes it easier to manage state and ensures consistency for users, particularly in cases where state needs to be preserved or shared.

How does `useQueryState` improve the user experience?

It allows users to refresh the page or share the URL with others while preserving the same state. This ensures that users can pick up where they left off without losing their data or settings, enhancing the overall user experience.

What is the difference between using `useState` and `useRef` in React?

`useState` triggers a re-render when the value changes, while `useRef` does not. `useRef` is used for values that do not need to be displayed in the UI or that should not trigger a re-render when updated. `useState` should be used for values that interact with the UI, while `useRef` is ideal for internal component logic.

When should you use `useRef` instead of `useState`?

You should use `useRef` for values that are internal to the component and don't need to be rendered or affect the UI. Examples include counters or values that are used for calculations or logic within the component, but not displayed to the user.

Why is it important to split components into smaller, reusable pieces in React?

Splitting components into smaller, focused pieces makes them easier to understand, maintain, and test. It also promotes reusability across the application, allowing you to use the same components in different places without duplicating code.

How does the URL become a state manager in React with `useQueryState`?

The `useQueryState` hook stores the state in the URL's query parameters. This means the state is persistent, can be shared through the URL, and will remain the same even when the page is refreshed. The URL acts as a state manager, handling persistence and sharing automatically.

What are the benefits of using smaller components in React applications?

Smaller components are easier to understand and maintain because they focus on one specific task. They are also more reusable, which helps keep the application modular and reduces code duplication.

What does Darius suggest as a fundamental skill for React developers?

Darius emphasizes that understanding when and why to use tools like `useState`, `useEffect`, and `useRef`, and knowing when not to use them, is a fundamental skill for becoming a good React developer. This involves adopting the right mental model for managing state and designing components.