Why I am hooked on the future of React

•Download as PPTX, PDF•

1 like•503 views

This document discusses the history and evolution of React components from classes to hooks. It covers the problems with class components, such as complex this bindings and lifecycle methods. Hooks are introduced as a way to use state and side effects in function components by using functions like useState, useEffect and useContext. Custom hooks are also discussed as a way to extract component logic into reusable functions. The document emphasizes that hooks are optional and classes will continue to work, but hooks allow for more flexible and composable components.

Why I am
hooked on the
future of React
@mauricedb
© ABL - The Problem Solver 1

 Maurice de Beijer
 The Problem Solver
 Microsoft MVP
 Freelance developer/instructor
 Twitter: @mauricedb
 Web: http://www.TheProblemSolver.nl
 E-mail: maurice.de.beijer@gmail.com
2ABL - The Problem Solver

The React
Newsletter
© ABL - The Problem Solver 4
http://bit.ly/ReactNewsletter

History
of
Components
© ABL - The Problem Solver 5

Original
Component
API
© ABL - The Problem Solver 6

Class
Components
© ABL - The Problem Solver 7

State
&
Lifecycle
© ABL - The Problem Solver 8

The problem
with classes
© ABL - The Problem Solver 9

Fat arrow for
some functions
© ABL - The Problem Solver 11

Single
responsibility
in multiple
functions
© ABL - The Problem Solver 12

Functional
Components
© ABL - The Problem Solver 13

The
Problem
© ABL - The Problem Solver 14

If your only
tool …
© ABL - The Problem Solver 16

Deeply
Nested
Components
© ABL - The Problem Solver 17

Many are
wrappers to
add props
© ABL - The Problem Solver 18

Render
Props
© ABL - The Problem Solver 19

Introducing
Hooks
© ABL - The Problem Solver 21

useState()
© ABL - The Problem Solver 24

Just
State
© ABL - The Problem Solver 25

Side Effects
© ABL - The Problem Solver 26

useEffect()
© ABL - The Problem Solver 27

Render
Props
© ABL - The Problem Solver 29

useContext()
© ABL - The Problem Solver 30

All hooks
 Basic hooks
 useState()
 useEffect()
 useContext()
 Additional Hooks
 useReducer()
 useLayoutEffect()
 useRef()
 useCallback()
 useMemo()
 useImperativeHandle()
 Custom hooks
 useDebugValue()
 Your custom hooks
© ABL - The Problem Solver 31

Custom
Hooks
© ABL - The Problem Solver 32

Custom
Hooks
© ABL - The Problem Solver 33

Using
The
Hook
© ABL - The Problem Solver 34

Rules
of
Hooks
© ABL - The Problem Solver 35

Rules
of
Hooks
© ABL - The Problem Solver 36
 Hooks can only be used in functional components
 Or in other hooks
 Not in class based components
 Hooks must always be created in the same order
 Must be outside loops, conditions or nested functions
 Hooks names must be prefixed with `use`
 There is an ESLint plugin to enforce these rules

Hooks are
optional
© ABL - The Problem Solver 37

Classes will
keep on
working
© ABL - The Problem Solver 38

Maurice de Beijer
@mauricedb
© ABL - The Problem Solver 39

Building a small to medium size business application with React isn't terribly hard. It has been done lots of times and there is plenty of information about what works and what doesn't. However building a large, complex, distributed and mission critical application with React is another matter. Add occasional poor mobile connectivity and things become really challenging. That doesn't mean that it is impossible, it is just harder to architect and develop. In this session Maurice de Beijer will share his experiences in building a globally deployed application that is used by thousands of people who depend on the availability and proper functioning of the application for a safe work environment. https://www.meetup.com/nl-NL/tilburg-tech-tuesdays/events/277150883/

Building Reliable Applications Using React, .NET & Azure

Maurice De Beijer [MVP]

Een kleine React applicatie bouwen met een backend is niet moeilijk. Maar wat als de applicatie groter en complexer wordt? Dan wordt het een ander verhaal. En al helemaal als het een publiek toegankelijke applicatie is. Plotseling blijkt dat allerlei vaak gedane aannames niet meer kloppen. Je krijgt te maken met netwerkstoringen en schaalbaarheid. Verschillende teams die onafhankelijk van elkaar aan de front- en backend werken. Runtime fouten die optreden omdat sommige browsers toch net even anders blijken te werken dan je verwacht. In deze sessie gaat Maurice de Beijer zijn ervaringen delen over hoe je dit aan kan pakken.

Building reliable applications with React, C#, and Azure

Maurice De Beijer [MVP]

The productive developer guide to React

Maurice De Beijer [MVP]

The React team has rewritten the book on developing components several times. This time they have introduced Suspense. Amongst other thing this makes splitting your application into multiple bundles easier. But that is only the start as the real innovation comes when loading data. Gone are the side effect hooks with the typical loading, loaded and error states. Instead we can suspend components when loading data. Need to do multiple request? No problem you can suspend multiple components at the same time if you want. Need to trap errors? No problem just use a standard React error boundary. Come to this session to learn what React Suspense can do for you.

Practice TypeScript Techniques Building React Server Components App

Maurice De Beijer [MVP]

In this hands-on workshop, Maurice will personally guide you through a series of exercises designed to empower you with a deep understanding of React Server Components and the power of TypeScript. Discover how to optimize your applications, improve performance, and unlock new possibilities. Maurice will virtually be by your side, offering comprehensive guidance and answering your questions as you navigate each exercise. By the end of the workshop, you'll have mastered React Server Components, armed with a newfound arsenal of TypeScript knowledge to supercharge your React applications. Don't miss this opportunity to elevate your React expertise to new heights. Join our workshop and unlock the potential of React Server Components with TypeScript. Your apps will thank you.

Building high-performance web applications with Preact

Maurice De Beijer [MVP]

Ch06.ppt

DeekshithaReddy63

Building high performance web applications

Maurice De Beijer [MVP]

Building high performance web applications

Maurice De Beijer [MVP]

Building high performance web applications

Maurice De Beijer [MVP]

Vertafore: Database Evaluation - Selecting Apache Cassandra

DataStax Academy

Vertafore develops and delivers cloud-based insurance software and services for the insurance industry. In this session, we'll chronicle one development team's journey through the database technology landscape that led to the evaluation and selection of Apache Cassandra as part of DataStax Enterprise from a small pool of contenders. We'll describe the process from setup to selection, including evaluation guidelines, testing strategies, tools, as well as our mindset. We'll also describe the project's initial goals, some milestones, and our communication strategy to inform those with budgetary powers.

Westrich spock-assets-gum

Brian Westrich

Module 1: JavaScript Basics

Daniel McGhan

android ch5.pptx

mohamedMoktarMohamed

devops

Somkiat Puisungnoen

Continuous Performance Monitoring of a Distributed Application [CON4730]

Ashish Srivastava

the State of the Dolphin - October 2020

Frederic Descamps

AngularJs Style GuideChiew Carol

Practical Guidelines for Solving Difficult Mixed Integer Programs

IBM Decision Optimization

Mixed Integer Programming: Analyzing 12 Years of Progress

IBM Decision Optimization

Introduction to JavaScript for APEX Developers - Module 1: JavaScript Basics

Daniel McGhan

Sean Kenney - Solving Parallel Software Challenges with Patterns

iasaglobal

Mobatec in a NutshellMathieu Westerweele

A foolproof Way to Estimate a Software Project

Maurice De Beijer [MVP]

Let's face the facts and admit it: Estimating how long it will take to build software is hard. Why is estimation so hard? Well there are some reasons for that. Many people tend to be optimistic about how long it will take to do a task. Not surprising when we learn the way memory works. It tends to skew our experiences from old projects. We often forget the many small setbacks encountered. Another reason is that many tasks are not included in the initial estimate. They only become visible over time. Does that mean that estimation is impossible and a waste of time? Not at all. Many software development activities are commercial activities. Starting something without even a rough estimate of what the costs and timeline will be is risky at best.

Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress

Maurice De Beijer [MVP]

Tired of having users email you that your Svelte application is broken? Turns out that building reliable applications is hard and requires a lot of testing. You can write unit tests but quite often these all pass and the application is still broken. Why? Because they test parts of the application in isolation. But for a reliable application we need more. We need to make sure that all parts, including the backend API’s, work together as intended. Cypress is a great tool to achieve this. It will test you complete web application in the browser and use it like a real world user would. In this session Maurice will show you how to use Cypress during development and on the CI server with Svelte. He will share tips and tricks to make your tests more resilient and more like how an actual end user would behave.

Similar to Why I am hooked on the future of React

React suspense, not just for Alfred Hitchcock

Maurice De Beijer [MVP]

Practice TypeScript Techniques Building React Server Components App

Maurice De Beijer [MVP]

Building high-performance web applications with Preact

Maurice De Beijer [MVP]

Ch06.ppt

DeekshithaReddy63

Building high performance web applications

Maurice De Beijer [MVP]

Building high performance web applications

Maurice De Beijer [MVP]

Building high performance web applications

Maurice De Beijer [MVP]

Vertafore: Database Evaluation - Selecting Apache Cassandra

DataStax Academy

Westrich spock-assets-gum

Brian Westrich

Module 1: JavaScript Basics

Daniel McGhan

android ch5.pptx

mohamedMoktarMohamed

devops

Somkiat Puisungnoen

Continuous Performance Monitoring of a Distributed Application [CON4730]

Ashish Srivastava

the State of the Dolphin - October 2020

Frederic Descamps

AngularJs Style GuideChiew Carol

Practical Guidelines for Solving Difficult Mixed Integer Programs

IBM Decision Optimization

Mixed Integer Programming: Analyzing 12 Years of Progress

IBM Decision Optimization

Introduction to JavaScript for APEX Developers - Module 1: JavaScript Basics

Daniel McGhan

Sean Kenney - Solving Parallel Software Challenges with Patterns

iasaglobal

Mobatec in a NutshellMathieu Westerweele

Similar to Why I am hooked on the future of React (20)

React suspense, not just for Alfred Hitchcock

Practice TypeScript Techniques Building React Server Components App

Building high-performance web applications with Preact

Ch06.ppt

Building high performance web applications

Vertafore: Database Evaluation - Selecting Apache Cassandra

Westrich spock-assets-gum

Module 1: JavaScript Basics

android ch5.pptx

devops

Continuous Performance Monitoring of a Distributed Application [CON4730]

the State of the Dolphin - October 2020

AngularJs Style Guide

Practical Guidelines for Solving Difficult Mixed Integer Programs

Mixed Integer Programming: Analyzing 12 Years of Progress

Introduction to JavaScript for APEX Developers - Module 1: JavaScript Basics

Sean Kenney - Solving Parallel Software Challenges with Patterns

Mobatec in a Nutshell

More from Maurice De Beijer [MVP]

A foolproof Way to Estimate a Software Project

Maurice De Beijer [MVP]

Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress

Maurice De Beijer [MVP]

Build reliable Svelte applications using Cypress

Maurice De Beijer [MVP]

Tired of having users email you that your web application is broken? Turns out that building reliable web applications is hard and requires a lot of testing. You can write unit tests but quite often these all pass and the application is still broken. Why? Because they test parts of the application in isolation. But for a reliable application we need more. We need to make sure that all parts work together as intended. Cypress is a great tool to achieve this. It will test you complete web application in the browser and use it like a real user would. In this session Maurice will show you how to use Cypress during development and on the CI server. He will share tips and tricks to make your tests more resilient and more like how an actual end user would behave.

Building Reliable Applications Using React, .NET & Azure

Maurice De Beijer [MVP]

Building a small to medium size business application with React isn't terribly hard. It has been done lots of times and there is plenty of information about what works and what doesn't. However building a large, complex and mission critical application with React is another matter. How to configure reliable hosting on Azure for the front and back-end? How to track runtime errors that happen in the browser. And how to create an efficient workflow between front and back-end teams. In this session Maurice de Beijer will share his experiences in building a globally deployed application that is used by thousands of people who depend on the availability and proper functioning of the application for a safe work environment. https://azconf.dev/

Concurrent Rendering Adventures in React 18

Maurice De Beijer [MVP]

With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet? There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more. Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more. https://reactadvanced.com/workshops-3h

Why I am hooked on the future of React

Maurice De Beijer [MVP]

The React team rewrote the book on developing components. Before we had a choice between classes and functional components. Yet many components needed to be classes. A functional component was often too limited. Now, using hooks, we can extend functional components to be as powerful as we want. Suspense and asynchronous rendering is in the future of React. It will make large applications much more responsive and easier to deal with. Getting started with suspense and asynchronous rendering isn't hard as you will discover. Come to this session to learn what React hooks are and how to get started using hooks. But be warned, once seen React hooks can’t be unseen and your React components will never be the same again.

Building reliable web applications using Cypress

Maurice De Beijer [MVP]

Getting started with React Suspense and concurrent rendering

Maurice De Beijer [MVP]

React keeps on evolving and making hard things easier for the average developer. One case, where React was not particularly hard but very repetitive, is working with AJAX request. There is always the trinity of loading, success and possible error states that had to be handled each time. But no more as the <Suspense /> component makes life much easier. Another case is performance of larger and complex applications. Usually React is fast enough but with a large application rendering components can conflict with user interactions. Concurrent rendering will, mostly automatically, take care of this. You will learn all about using , showing loading indicators and handling errors. You will see how easy it is to get started with concurrent rendering. You will make suspense even more capable by combining it with concurrent rendering, the useTransition() hook and the component.

From zero to hero with the Reactive extensions for JavaScript

Maurice De Beijer [MVP]

Reactive and functional programming, you have probably heard the term mentioned before. It’s supposed to be really cool and a good practice. But what is reactive programming exactly and how to get started with it in JavaScript? And why does Angular start using the reactive extensions for JavaScript (RxJS) instead of standard promises? In this presentation, Maurice is going to show you how to get started with RxJS, the JavaScript implementation of the ReactiveX library. You will learn why using RxJS is a great way of dealing with streams of events in an asynchronous and functional way.

From zero to hero with the reactive extensions for JavaScript

Maurice De Beijer [MVP]

Create flexible React applications using GraphQL apis

Maurice De Beijer [MVP]

Using restful APIs can be hard on your React applications. Before you know it, you are doing lots of parallel queries to the server. Using GraphQL instead of REST might help a lot. Instead of downloading many complete resources each component declares its own needs. Then the GraphQL client library then combines these requirements. The result is a single optimized query for the server. In this session, Maurice de Beijer is going to show you how to get started with GraphQL in your React applications.

Create flexible react applications using GraphQL API's

Maurice De Beijer [MVP]

Docker for a .NET web developer

Maurice De Beijer [MVP]

You have probably heard about Docker, these days it is a popular topic with cloud computing. But what does it take for a .NET developer to start with Docker? And where can you use it? Of course, you can deploy an application to the cloud using Docker. But you can also use Docker very effectively as a support tool when developing or testing. In this session, Maurice de Beijer will show you some of the many opportunities to use Docker.

From zero to hero with the reactive extensions for JavaScript

Maurice De Beijer [MVP]

Docker containers on Windows

Maurice De Beijer [MVP]

From zero to hero with the reactive extensions for java script

Maurice De Beijer [MVP]

Tooling for the productive front end developer

Maurice De Beijer [MVP]

More from Maurice De Beijer [MVP] (17)

A foolproof Way to Estimate a Software Project

Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress

Build reliable Svelte applications using Cypress

Building Reliable Applications Using React, .NET & Azure

Concurrent Rendering Adventures in React 18

Why I am hooked on the future of React

Building reliable web applications using Cypress

Getting started with React Suspense and concurrent rendering

From zero to hero with the Reactive extensions for JavaScript

From zero to hero with the reactive extensions for JavaScript

Create flexible React applications using GraphQL apis

Create flexible react applications using GraphQL API's

Docker for a .NET web developer

From zero to hero with the reactive extensions for JavaScript

Docker containers on Windows

From zero to hero with the reactive extensions for java script

Tooling for the productive front end developer

Recently uploaded

Essentials of Automations: The Art of Triggers and Actions in FME

Safe Software

In this second installment of our Essentials of Automations webinar series, we’ll explore the landscape of triggers and actions, guiding you through the nuances of authoring and adapting workspaces for seamless automations. Gain an understanding of the full spectrum of triggers and actions available in FME, empowering you to enhance your workspaces for efficient automation. We’ll kick things off by showcasing the most commonly used event-based triggers, introducing you to various automation workflows like manual triggers, schedules, directory watchers, and more. Plus, see how these elements play out in real scenarios. Whether you’re tweaking your current setup or building from the ground up, this session will arm you with the tools and insights needed to transform your FME usage into a powerhouse of productivity. Join us to discover effective strategies that simplify complex processes, enhancing your productivity and transforming your data management practices with FME. Let’s turn complexity into clarity and make your workspaces work wonders!

FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf

FIDO Alliance

GraphRAG is All You need? LLM & Knowledge Graph

Guy Korland

Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs. 1. Unifying Large Language Models and Knowledge Graphs: A Roadmap. https://arxiv.org/abs/2306.08302 2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs: https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/

Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...

SOFTTECHHUB

The choice of an operating system plays a pivotal role in shaping our computing experience. For decades, Microsoft's Windows has dominated the market, offering a familiar and widely adopted platform for personal and professional use. However, as technological advancements continue to push the boundaries of innovation, alternative operating systems have emerged, challenging the status quo and offering users a fresh perspective on computing. One such alternative that has garnered significant attention and acclaim is Nitrux Linux 3.5.0, a sleek, powerful, and user-friendly Linux distribution that promises to redefine the way we interact with our devices. With its focus on performance, security, and customization, Nitrux Linux presents a compelling case for those seeking to break free from the constraints of proprietary software and embrace the freedom and flexibility of open-source computing.

Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...

James Anderson

Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management. The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM). Speakers: Bob Boule Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle. Gopinath Rebala Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.

GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...

James Anderson

FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf

FIDO Alliance

20240605 QFM017 Machine Intelligence Reading List May 2024

Matthew Sinclair

FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf

FIDO Alliance

Climate Impact of Software Testing at Nordic Testing Days

Kari Kakkonen

My slides at Nordic Testing Days 6.6.2024 Climate impact / sustainability of software testing discussed on the talk. ICT and testing must carry their part of global responsibility to help with the climat warming. We can minimize the carbon footprint but we can also have a carbon handprint, a positive impact on the climate. Quality characteristics can be added with sustainability, and then measured continuously. Test environments can be used less, and in smaller scale and on demand. Test techniques can be used in optimizing or minimizing number of tests. Test automation can be used to speed up testing.

GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...

Neo4j

Dr. Sean Tan, Head of Data Science, Changi Airport Group Discover how Changi Airport Group (CAG) leverages graph technologies and generative AI to revolutionize their search capabilities. This session delves into the unique search needs of CAG’s diverse passengers and customers, showcasing how graph data structures enhance the accuracy and relevance of AI-generated search results, mitigating the risk of “hallucinations” and improving the overall customer journey.

Microsoft - Power Platform_G.Aspiotis.pdf

Uni Systems S.M.S.A.

Communications Mining Series - Zero to Hero - Session 1

DianaGray10

This session provides introduction to UiPath Communication Mining, importance and platform overview. You will acquire a good understand of the phases in Communication Mining as we go over the platform with you. Topics covered: • Communication Mining Overview • Why is it important? • How can it help today’s business and the benefits • Phases in Communication Mining • Demo on Platform overview • Q/A

Free Complete Python - A step towards Data Science

RinaMondal9

Monitoring Java Application Security with JDK Tools and JFR Events

Ana-Maria Mihalceanu

Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf

Paige Cruz

Monitoring and observability aren’t traditionally found in software curriculums and many of us cobble this knowledge together from whatever vendor or ecosystem we were first introduced to and whatever is a part of your current company’s observability stack. While the dev and ops silo continues to crumble….many organizations still relegate monitoring & observability as the purview of ops, infra and SRE teams. This is a mistake - achieving a highly observable system requires collaboration up and down the stack. I, a former op, would like to extend an invitation to all application developers to join the observability party will share these foundational concepts to build on:

Pushing the limits of ePRTC: 100ns holdover for 100 days

Adtran

UiPath Test Automation using UiPath Test Suite series, part 5

DianaGray10

PCI PIN Basics Webinar from the Controlcase Team

ControlCase

GridMate - End to end testing is a critical piece to ensure quality and avoid...

ThomasParaiso2

Recently uploaded (20)

Essentials of Automations: The Art of Triggers and Actions in FME

FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf

GraphRAG is All You need? LLM & Knowledge Graph

Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...

Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...

GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...

FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf

20240605 QFM017 Machine Intelligence Reading List May 2024

FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf

Climate Impact of Software Testing at Nordic Testing Days

GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...

Microsoft - Power Platform_G.Aspiotis.pdf

Communications Mining Series - Zero to Hero - Session 1

Free Complete Python - A step towards Data Science

Monitoring Java Application Security with JDK Tools and JFR Events

Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf

Pushing the limits of ePRTC: 100ns holdover for 100 days

UiPath Test Automation using UiPath Test Suite series, part 5

PCI PIN Basics Webinar from the Controlcase Team

GridMate - End to end testing is a critical piece to ensure quality and avoid...

Why I am hooked on the future of React

2.  Maurice de Beijer  The Problem Solver  Microsoft MVP  Freelance developer/instructor  Twitter: @mauricedb  Web: http://www.TheProblemSolver.nl  E-mail: maurice.de.beijer@gmail.com 2ABL - The Problem Solver

31. All hooks  Basic hooks  useState()  useEffect()  useContext()  Additional Hooks  useReducer()  useLayoutEffect()  useRef()  useCallback()  useMemo()  useImperativeHandle()  Custom hooks  useDebugValue()  Your custom hooks © ABL - The Problem Solver 31

36. Rules of Hooks © ABL - The Problem Solver 36  Hooks can only be used in functional components  Or in other hooks  Not in class based components  Hooks must always be created in the same order  Must be outside loops, conditions or nested functions  Hooks names must be prefixed with `use`  There is an ESLint plugin to enforce these rules

Editor's Notes

https://pixabay.com/nl/photos/mount-rushmore-beeldhouwkunst-3608620/
https://pixabay.com/nl/photos/antelope-canyon-zandsteen-canyon-1128815/
https://unsplash.com/photos/CrhsIRY3JWY
https://pixabay.com/nl/illustrations/regels-boord-cirkel-lettertype-1752415/

Why I am hooked on the future of React

Recommended

Recommended

More Related Content

Similar to Why I am hooked on the future of React

Similar to Why I am hooked on the future of React (20)

More from Maurice De Beijer [MVP]

More from Maurice De Beijer [MVP] (17)

Recently uploaded

Recently uploaded (20)

Why I am hooked on the future of React

Editor's Notes