ReactFoo 2019

Managing state for UI components in React until now has required a dependency on libraries like Redux. But for simple UI level state management React has introduced Hooks into React core.

Understand the basics of using state, side-effects and the Context API using React’s three basic Hooks (useState, useEffect and useContext).

Outline

Start with a look at the history of react state in React.
Talk about the 16.x releases from React in 2018 and how they were instrumental in setting Hooks up for success.
Cover functional components, talk about how they change the way we write components.
Walk through code required to use Hooks in React and show side by side comparisons of how we write class based components and how that syntax changes when we switch to Hooks.
Cover each basic React Hook useState, useEffect & useContext in a demo that encompasses the use of them all.
Walk through the code in a live demo.
Optionally with enough time I can talk about useReducer an advanced React Hook.

Requirements

Their brain only.

Speaker bio

Eric Bishard is a Developer Advocate working with KendoReact at Progress Software. As a software engineer, he has experience building web based applications with a focus on components for user interfaces in frameworks like Angular and React. Feel free to connect with Eric (@httpJunkie) on Twitter!

Links

• https://dev.to/httpjunkie/my-writings-and-presentations-on-react-hooks-33ip

Slides

https://docs.google.com/presentation/d/1CNyxv438-Nd8O41gIUSB6B3a4Tl3hXrQqu1WmYTuRSE/edit?usp=sharing