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 · WWC 2025

1:22 min

Advantages of utilizing native React state management tools

Marc Brehmer Marc Brehmer · WWC 2024

4:38 min

Introduction to react components, props, and state

Clemens Helm · WWC 2023

5:01 min

Designing flexible and reusable component APIs

Emma Britnor Emma Britnor · WWC 2024

1:46 min

Utilizing React lifecycles to reduce redundant rendering

Shem Magnezi Shem Magnezi · WWC 2025

More from World Congress 2024

Beyond the Hype: Real-World AI Strategies Panel thumbnail
24:07
10 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
almost 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
almost 2 years ago

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

Sue Quackenbush

Dapr in Practice thumbnail
24:08
almost 2 years ago

Dapr in Practice

marcklefter

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

Minimising the Carbon Footprint of Workloads

Michael Mueller

Upcoming sessions on this topic

Open session

World Congress 2026 North America

Beyond Vibe Coding: An AI Builder’s Guide to Migrating 10k+ React Components

Shubham Chaurasia

Senior Software Engineer @ Meta

Shubham Chaurasia
Open session

World Congress 2026 North America

One Repo, One Strategy: Scalable Full-Stack Testing in a Monorepo World

Bartosz Leczycki, Paweł Matynia

Bartosz Leczycki
Paweł Matynia
Open session

World Congress 2026 North America

Offloading IoT State: Solving the Memory Crisis on Legacy Hardware

Pravin Nagare

Senior Software Engineer, Roku

Pravin Nagare
Open session

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

How to generate business value through performance optimizations

Nikolai Sidiropulo

Software Engineer at Meta

Nikolai Sidiropulo
Open session

World Congress 2026 North America

Testing React Backends Like a Pro: Mocking Databases with SQLite

David Morris

Solution Architect

David Morris

Related videos

State management in a world of hooks thumbnail
28:10
LIVE • about 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
WWC 2024 • almost 2 years ago

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

Marc Brehmer

Bringing back reactivity in "reactive" frontend thumbnail
28:43
WWC 2024 • almost 2 years ago

Bringing back reactivity in "reactive" frontend

Michał Moroz

Building Interactive Async UI with React 19 and Ariakit thumbnail
25:22
WWC 2025 • 12 months 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
WWC 2024 • almost 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 • about 1 month 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.