WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
World Congress 2024 • Aug 20, 2024 • Session details

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

Daniel Espino Garcia

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.

Pause
Mute Enter Fullscreen
#1 about 3 min

Introduction to React hooks usage in large codebases

Managing functional components in large open-source codebases highlights common patterns and pitfalls.

#2 about 4 min

Understanding React hooks internal state and memory overhead

Relying on internal linked lists means hooks add memory overhead during each render pass.

#3 about 3 min

Prioritizing code readability over minor performance optimizations

Optimizing for future readers and maintainers matters more than eliminating marginal performance bottlenecks.

#4 about 3 min

Moving static functions and constants outside React components

Extracting non-dependent logic from components prevents redundant memory allocation and simplifies dependencies.

#5 about 3 min

Declaring explicit dependency arrays to prevent future regression bugs

Explicitly defining all variables inside dependency arrays prevents unexpected production bugs during subsequent modifications.

#6 about 2 min

Clarifying hook dependencies with derived intermediate variables

Naming complex condition logic as intermediate variables clarifies business rules and stabilizes render dependencies.

#7 about 2 min

Avoiding unnecessary component re-renders with mutable references

Storing non-visual data in references prevents disruptive cascading re-renders across the component tree.

#8 about 2 min

Removing dependency arrays with functional state updates

Utilizing the previous state callback in updater functions removes the need for object dependencies.

#9 about 2 min

Eliminating redundant re-renders caused by state updates in effects

Calculating derived values directly during render removes the need to synchronize state inside effect hooks.

#10 about 3 min

Sharing reusable component logic with custom React hooks

Encapsulating repeated lifecycle and platform logic into standalone custom hooks reduces codebase duplication.

Matching moments

3:48 min

Designing an ideal hook-based state management API

Adam Klein · LIVE

44 sec

Constructing basic UI components using React hooks

Marc Rousavy Marc Rousavy · World Congress 2025

1:22 min

Advantages of utilizing native React state management tools

Marc Brehmer Marc Brehmer · World Congress 2024

4:38 min

Introduction to react components, props, and state

Clemens Helm · World Congress 2023

5:01 min

Designing flexible and reusable component APIs

Emma Britnor Emma Britnor · World Congress 2024

1:46 min

Utilizing React lifecycles to reduce redundant rendering

Shem Magnezi Shem Magnezi · World Congress 2025

More from World Congress 2024

Beyond the Hype: Real-World AI Strategies Panel thumbnail
24:07
12 months ago

Beyond the Hype: Real-World AI Strategies Panel

Mike Butcher, Jürgen Müller, Katrin Lehmann, Tobias Regenfuss

Carl Lapierre - Exploring Advanced Patterns in Retrieval-Augmented Generation thumbnail
21:17
almost 2 years ago

Carl Lapierre - Exploring Advanced Patterns in Retrieval-Augmented Generation

Carl Lapierre

Coding an Immersive Copilot using Unity / .NET and Azure OpenAI! thumbnail
31:50
about 2 years ago

Coding an Immersive Copilot using Unity / .NET and Azure OpenAI!

Zaid Zaim

Building a diverse tech company: The power of Diversity, Equity, Inclusion, and Belonging thumbnail
29:43
about 2 years ago

Building a diverse tech company: The power of Diversity, Equity, Inclusion, and Belonging

Sue Quackenbush

Dapr in Practice thumbnail
24:08
about 2 years ago

Dapr in Practice

marcklefter

Minimising the Carbon Footprint of Workloads thumbnail
27:46
about 2 years ago

Minimising the Carbon Footprint of Workloads

Michael Mueller

Related videos

State management in a world of hooks thumbnail
28:10
LIVE • over 6 years ago

State management in a world of hooks

Adam Klein

Rethinking React State Management: The Power of Built-In Solutions thumbnail
23:39
World Congress 2024 • about 2 years ago

Rethinking React State Management: The Power of Built-In Solutions

Marc Brehmer

Bringing back reactivity in "reactive" frontend thumbnail
28:43
World Congress 2024 • about 2 years ago

Bringing back reactivity in "reactive" frontend

Michał Moroz

Building Interactive Async UI with React 19 and Ariakit thumbnail
25:22
World Congress 2025 • about 1 year ago

Building Interactive Async UI with React 19 and Ariakit

Aurora Scharff

Common Mistakes in Vue.js and How to Avoid Them thumbnail
28:36
World Congress 2024 • about 2 years ago

Common Mistakes in Vue.js and How to Avoid Them

danielkellyio

The Pragmatic Architect: Balancing Necessity vs. Sufficiency in React Systems thumbnail
20:49
Europe 2026 Virtual • 3 months ago

The Pragmatic Architect: Balancing Necessity vs. Sufficiency in React Systems

Ana Gil Amor

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.