> Markdown version of [/videos/957-dos-and-don-ts-with-react-hooks-an-opinionated-approach?t=1090](https://www.wearedevelopers.com/videos/957-dos-and-don-ts-with-react-hooks-an-opinionated-approach?t=1090). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Dos and don'ts with react hooks. An opinionated approach

Constant memoization in React is a premature optimization trap. Discover an opinionated approach to hooks that prioritizes clean code, eliminates needless re-renders, and future-proofs your architecture.

- **Speakers:** [Daniel Espino Garcia](https://www.wearedevelopers.com/@daniel-espino-garcia)
- **Event:** World Congress 2024
- **Published:** August 20, 2024
- **Duration:** 20:16
- **URL:** https://www.wearedevelopers.com/videos/957-dos-and-don-ts-with-react-hooks-an-opinionated-approach

## Summary

Drawing from extensive code reviews at Mattermost—an open-source collaboration platform migrating to React functional components—this presentation offers an opinionated approach to using React Hooks. While hooks introduce powerful state management via internal linked lists, their abstraction often leads to misuse. The core philosophy centers on prioritizing readability and future-proofing over premature micro-optimizations, emphasizing that code is read far more often than it is written. Relying on Amdahl's law, developers are cautioned against over-engineering with constant memoization unless a proven performance bottleneck exists.

Several common pitfalls inflate component complexity and degrade performance. A primary recommendation is to extract static constants and helper functions outside the component entirely. This practice reduces memory overhead, eases garbage collection, and eliminates unnecessary dependency tracking for `useCallback`. Similarly, developers should avoid omitting hook dependencies to cleverly bypass boilerplate. Explicitly declaring all reactive values in dependency arrays ensures logic remains stable and future-proof as features expand and new developers inherit the codebase.

Intelligent state management requires distinguishing between UI-driven data and background operations. Storing non-rendering information, such as API pagination indexes, in standard state forces unnecessary component updates; utilizing `useRef` provides a cleaner, render-safe alternative without triggering lifecycle changes. Furthermore, updating state inside a `useEffect` based on incoming props is identified as an anti-pattern that causes needless double renders. Instead, developers should rely on derived state calculated synchronously during rendering. By adopting functional state updaters to sever dependency chains and extracting repetitive logic into custom abstractions, engineering teams can maintain both performant and highly readable applications.

**Keywords:** react hooks best practices, functional components architecture, premature performance optimization, usecallback memory overhead, static variable extraction, strict dependency array management, derived state patterns, useref non-rendering data, functional setstate updaters, useeffect double renders, custom hook abstraction, react garbage collection, component codebase readability, react linked list internals

## Chapters

1. **Introduction to React hooks usage in large codebases** (00:02) — Managing functional components in large open-source codebases highlights common patterns and pitfalls.
1. **Understanding React hooks internal state and memory overhead** (02:15) — Relying on internal linked lists means hooks add memory overhead during each render pass.
1. **Prioritizing code readability over minor performance optimizations** (05:47) — Optimizing for future readers and maintainers matters more than eliminating marginal performance bottlenecks.
1. **Moving static functions and constants outside React components** (08:22) — Extracting non-dependent logic from components prevents redundant memory allocation and simplifies dependencies.
1. **Declaring explicit dependency arrays to prevent future regression bugs** (10:23) — Explicitly defining all variables inside dependency arrays prevents unexpected production bugs during subsequent modifications.
1. **Clarifying hook dependencies with derived intermediate variables** (12:25) — Naming complex condition logic as intermediate variables clarifies business rules and stabilizes render dependencies.
1. **Avoiding unnecessary component re-renders with mutable references** (14:07) — Storing non-visual data in references prevents disruptive cascading re-renders across the component tree.
1. **Removing dependency arrays with functional state updates** (15:39) — Utilizing the previous state callback in updater functions removes the need for object dependencies.
1. **Eliminating redundant re-renders caused by state updates in effects** (16:57) — Calculating derived values directly during render removes the need to synchronize state inside effect hooks.
1. **Sharing reusable component logic with custom React hooks** (18:10) — Encapsulating repeated lifecycle and platform logic into standalone custom hooks reduces codebase duplication.

## Related Moments

- [Designing an ideal hook-based state management API](https://www.wearedevelopers.com/videos/13-state-management-in-a-world-of-hooks) (from "State management in a world of hooks")
- [Constructing basic UI components using React hooks](https://www.wearedevelopers.com/videos/1466-building-better-apps-with-react-native) (from "Building Better Apps with React Native")
- [Advantages of utilizing native React state management tools](https://www.wearedevelopers.com/videos/1019-rethinking-react-state-management-the-power-of-built-in-solutions) (from "Rethinking React State Management: The Power of Built-In Solutions")
- [Introduction to react components, props, and state](https://www.wearedevelopers.com/videos/653-how-to-become-an-ai-toolsmith) (from "How to become an AI toolsmith")
- [Designing flexible and reusable component APIs](https://www.wearedevelopers.com/videos/975-leveraging-storybook-for-component-driven-development-outside-of-your-classic-component-library) (from "Leveraging Storybook for Component Driven Development outside of your classic Component Library.")
- [Utilizing React lifecycles to reduce redundant rendering](https://www.wearedevelopers.com/videos/1667-the-journey-of-a-pixel-in-a-react-application) (from "The Journey of a Pixel in a React Application")

## Related Articles

- [The HTML Elements That You’re Probably Over-Engineering](https://www.wearedevelopers.com/magazine/646-the-html-elements-that-you-re-probably-over-engineering)
- [16 Best Free React UI Libraries in 2025](https://www.wearedevelopers.com/magazine/148-16-best-free-react-ui-libraries-in-2025)
- [Top 5 React Form Libraries for Developers](https://www.wearedevelopers.com/magazine/399-top-5-react-form-libraries-for-developers)
- [How to Avoid Over-Engineering](https://www.wearedevelopers.com/magazine/546-how-to-avoid-over-engineering)

## Related Jobs

- [React Engineer for Next.js UI - Hybrid, Impactful FinTech](https://www.wearedevelopers.com/jobs/ext/1444505-react-engineer-for-next-js-ui-hybrid-impactful-fintech) at **Bitpanda**
- [Senior Software Engineer, React (Investing & Trading)](https://www.wearedevelopers.com/jobs/ext/1937625-senior-software-engineer-react-investing-trading) at **Bitpanda**
- [React Engineer For Next.Js Ui - Hybrid, Impactful Fintech](https://www.wearedevelopers.com/jobs/ext/1934580-react-engineer-for-next-js-ui-hybrid-impactful-fintech) at **Bitpanda**
- [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1304673-software-engineer) at **Bitpanda**
- [Senior Software Engineer, React (Websites & Martech)](https://www.wearedevelopers.com/jobs/ext/1605272-senior-software-engineer-react-websites-martech) at **Bitpanda**
- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**