 Resources from Joel Hooks in 2021

Managing state in a UI is challenging. It's genuinely difficult and the solutions require a depth of knowledge and experience to understand. Everything is a balance of tradeoffs in complexity, performance, and user experience.

This is a series of interviews with experts, open-source maintainers, and UI developers that have combined decades of experience building stateful UI applications for millions of users. 

Part interview, part screen share, these videos should benefit you if you're building web applications.

They focus on React, but the underlying principles are valid for UI work in general (and beyond).

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

React State Management in 2021

This is a series of livestream recordings that have been previously recorded and edited. 

Bite-size video tutorials for badass web developers.

egghead

Let's Build! Livestreams with Badass Web Developers

codesandbox.io provides one of the fastest ways to start a new React project. In this lesson, we will take a first look at codesandbox, its interface, and the default React project it creates.

Use Codesandbox to Start a New React Application

Gatsby is a blazing fast static site generator built with React. Gatsby gives you all of the modern JavaScript tools you want; set up and ready to go out of the box.

gatsby

We take the [gatsby-starter-egghead-blog](https://github.com/eggheadio/gatsby-starter-egghead-blog) and convert it to a Gatsby theme. The process uses Yarn workspaces and is a great demonstration of the flexibility Gatsby gives us for creating and sharing our work.

Creating a Gatsby Theme with John Otander

Kent walks us through the internals of dom-testing-library and react-testing-library. 

There is a lot of set-up and tear down when testing UI components. These two libraries take away a lot of the work required to test React components well. 

Jest is commonly used in tandem with react-testing-library to assert results of your components. Jest simulates most browser apis with jsdom. react-testing-library helps you get values out of your components the same way your end users will. 

Links from the show:
- [Testing Library](https://testing-library.com)
- [Testing Javascript](https://testingjavascript.com)
- [Unit vs Integration vs E2E](https://kentcdodds.com/blog/unit-vs-integration-vs-e2e-tests)
- [Why you shouldn't ReactDOM.render to the body](https://medium.com/@dan_abramov/two-weird-tricks-that-fix-react-7cf9bbdef375)
- [Effective Snapshot Testing]( https://kentcdodds.com/blog/effective-snapshot-testing/)
- [Dev Tips with Kent](https://youtu.be/ttmvAm6esSc)
- https://kcd.im/news

Understanding how react-testing-library works with Kent C. Dodds

To help accelerate our understanding of React Hooks, Kent is going to live-code a tic-tac-toe app from the ground up taking a Hooks first approach! 

Hooks allow you to better separate your app's visual components from its state and functionality. Kent takes an accessibility and readability first approach to React development, so using hooks to separate your concerns makes your app easier to debug as well as reducing the mental and visual overhead when you are making sense of the code, making your code all around more maintainable. 

- [useHooks.com](https://usehooks.com/)

- Data is static information, state changes over your component's lifetime

- Reducers let you move logic from your component to your pure reducer function. Changes to state always go to the same function, it's great for debugging. 

- Reducer concepts are covered excellently in [Dan Abramov's Getting Started with Redux course](https://egghead.io/courses/getting-started-with-redux)

Using React Hooks to Build a Tic-Tac-Toe Game with Kent C. Dodds

Jared Palmer is the creator and maintainer of Formik, the premiere forms solution for React applications. Formik makes forms in React easy by managing your form's state and providing validation on all of your fields. Under the hood, Formik is using **React Hooks**, and today we are going to make our own mini Formik with them! 

`useReducer` is the hook to use for any complex state management. `useReducer` follows the redux principle of returning a modified copy of the state. Writing a custom hook with `useReducer` lets you decouple your handlers and state from the component into a testable function. 

- The `useEffect` hook isn't the same as the `componentDid...` lifecycle hooks. It runs on each render, and you can pass an array that tells it to not run if the value hasn't changed from the previous render. 

- `onBlur` should be used over `onMouseDown` so that errors aren't shown before the user types

- [useHooks.com](https://usehooks.com/)

- [Formik Overview](https://jaredpalmer.com/formik/docs/overview)

Build Your Own Formik Using React Hooks with Jared Palmer

RxJS is a library for composing asynchronous and event-based programs by using observable sequences. 


rxjs

André shows us how to build a minimum functioning RxJS and teaches us some important concepts about reactive programming.




JavaScript has multiple APIs that use callback functions that all do nearly the same thing with slight variations. Event listeners, array methods such as `.forEach`, promises, and NodeJS streams all are very close in the way they are written. Instead, in RxJS you'd unify all of these APIs under one abstraction. 

[Toy Rx](https://github.com/staltz/toy-rx) is an interesting library to go beyond this livestream.


André Staltz Presents: Build your own RxJS

Released in 2015, Redux might seem old. The reality is that its total usage outnumbers any other state management library by an order of magnitude.

Redux's maintainer Mark Erikson joins Joel to discuss the past, present, and future of Redux.

Mark's approach to state management begins by asking these questions:
- What kind of app am I building? 
- Where does the data come from? 
- How is it interacted with? 
- How long does it live for? 
- Does it change over time?




Using Redux in Modern React Apps with Mark Erikson

*Should all state changes be the result of an event and an action?*

David Khourshid argues this doesn't always work. In this conversation, David and Joel use the example of a person being either awake or asleep and the states between.

Thinking about application state in this way led David to research the history of finite state machines, eventually leading to the creation of the XState library.

XState for State Management in React Apps with David Khourshid

Tanner is known for his open source tooling collectively known as the TanStack. One part of the stack is React-Table, which Tanner describes as a sort of state manager for tables.

Another library Tanner's created is React Query. This set of Hooks focuses on fetching & caching state from the server, as Tanner sees React's built in useState and useReducer as adequate for most client side state.

In this conversation, Tanner talks with Joel about the evolution of React Query while providing a demo of the library in action.

Using react-query to Manage Server Data and Cache with Tanner Linsley

> I think you always want to think like a state machine. What are the actual finite states your component can be in at a given time?

Web development's shift from the imperative ("do this thing when there are changes over time") style to React's declarative style where UI is a function of State. However, there are still many ways to approach API design.

In this interview, Chance gives a guided tour behind the scenes of [ReachUI](https://reach.tech). There's more thought that goes into seemingly simple interactions than you might think.

State Management in React with Chance Strickland

Please be advised that this video contains language that can be considered explicit.

> If I'm focusing on anything other than state management, I'm wasting time.

In this in-depth, expletive-filled conversation, Formik creator Jared Palmer discusses a variety of angles to approach state management. Whether you use MobX, Immer, the `useEffect` hook, or even your app's URL, there are pitfalls everywhere. 

Learning to "think in state" can help you avoid them.

Additionally, Jared explores the biggest question of State Management: "Where will State live?" (and the answers aren't always obvious).

Managing Complex State in React with Jared Palmer [explicit]

> Recoil solves three basic issues: flexible shared state, Derived data & queries, and app-wide state observation

David McCabe is a UI engineer at Facebook and the author of Recoil.

David describes Recoil as the encapsulation of some patterns, which boils down to writing things down in some code in a way that provides structure to an application.

Other topics in this conversation include design patterns, React's Concurrent mode, and how the future of web development is informed by things we've seen in the past.

Using Recoil to Manage Orthogonal State in React Apps with David McCabe

> The challenge with useState in React Hooks is that it's local to components. Recoil expands this idea to manage more than local state.

Christopher Chedeau is a frontend manager at Facebook and co-creator of React Native among other libraries and tools.

In this conversation, he discusses the motivation behind Facebook's Recoil library and how it solves some of their problems. There is also a comparison of how libraries like MobX, Redux, Falcor, and others solve similar problems with different approaches.

While the application you work on might not be as large as Facebook, you'll still encounter many of the same challenges as you build. 

State Management in React with Christopher Chedeau

Paul Henschel is a frontend developer based in Germany and Switzerland. The founder of Luxundlaune, a photography platform in Germany, Paranoidandroid, a custom firmware for Android, and several open-source projects like [react-spring](https://www.react-spring.io) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber).

In this interview, Joel and Paul discuss the biggest challenges in state management, picking a state management library for your project, and the Redux mindset that everything should revolve around State. 

> Applications made without state in mind will turn into a mess, like a drawing. It doesn't scale. You shift into modeling stuff around refactoring. It's not great. If I write something big, I always start with a good stable state model.

State Management in React with Paul Henschel

React and Ruby on Rails play very nicely together if you are using the [react-rails gem](https://github.com/reactjs/react-rails). Using react-rails, you can easily drop in React components throughout your Rails application. In this lesson, we will get react-rails installed and create our first React component.

Getting started with the react-rails gem

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

In AngularJS, multiple HTTP requests can be coordinated with $q.all, making your project's code cleaner and more testable.

Multiple HTTP Requests with $q

The ui-router library for AngularJS provides the ability to name views within your application. This is useful for dividing up your application into sections, and changing the content of a section based on the current state.

ui-router Named Views

In his debut egghead.io lesson, Joel will show you how to get setup and running with ui-router, an alternative to AngularJS's default routing module.

Introduction to ui-router 

Visual Studio Code is an amazing tool for developers. It's lightweight and highly customizable, and perfect for creating web applications.

In this video Burke Holland gives us an overview of VS Code, and shows us a lot of the powerful tools that you can use to increase your productivity and enhance your developer experience.

Topics

Instructors

Content Type