Leigh Halliday

Video Guides & Talks

XState - Data Loading Service - Finite State Machines in React (youtube.com)
Sep 30, 2019
In this video we'll load data using XState and the help of a finite state machine. We'll keep track of needing to load more data, or if we've already fetched all that is available.
React Hooks: useContext (youtube.com)
Sep 18, 2019
Let's see how to combine useReducer and useContext to create a powerful pattern that allows us to encapsulate complicated nested state, and provide simple state values and action functions to any children of our Context Provider.
React Hooks: useReducer (youtube.com)
Sep 16, 2019
I know reducers from Redux, but something similar actually comes built in to React now with the useReducer hook. We'll see how to use it to clean up nested state.
How to use Autosuggest in React (youtube.com)
Aug 13, 2019
This video shows how to use the React Autosuggest library to show a dynamic list of countries which is loaded from a JSON endpoint. We'll use it within a Formik form and also cover how to tie Autosuggest into Formik and its validations.
Forms in React with Formik (youtube.com)
Aug 12, 2019
This video covers how to use Formik to create and manage forms in React. We'll cover getting user input, validating it with Yup, and then handling the form submission.
Forms in React - Vanilla React (youtube.com)
Aug 06, 2019
In this video we'll cover Forms in Vanilla React (no additional packages).
Google Maps in React - Building interactive maps (youtube.com)
May 02, 2019
In this video we will be building a map showing all of the different skateparks in Ottawa, Canada. The user will be able to click a Marker to reveal further details about the skatepark within an InfoWindow.
    Mapbox - Interactive maps in React (youtube.com)
    Apr 15, 2019
    This demo shows how to use Mapbox in React to create an interactive map showing markers and popups based on a dataset.
      Testing MobX with React Testing Library (youtube.com)
      Mar 20, 2019
      In this video we cover how to use React Testing Library to test a component being injected with a MobX store.
      React Testing Library - Testing Redux (youtube.com)
      Mar 02, 2019
      In this video we'll see how to test using Redux and connected components with the React Testing Library.
      Cancelling an Axios request in a useEffect hook (youtube.com)
      Feb 19, 2019
      This video shows how to cancel an Axios request before it completes. We'll use a useEffect hook and it's cleanup function to help us accomplish this.
      The useEffect hook and its lifecycle (youtube.com)
      Feb 14, 2019
      In this video we look at an issue I was having where state was being updated after the component had unmounted and the solution I came up with to solve that. What the heck is that 2nd argument for and did you know you can return a function from your useEffect function?
      React Testing Library - Testing a mock Axios request (youtube.com)
      Feb 13, 2019
      In this video we look at how to test a component with react testing library which contains an asynchronous Axios request that we'll mock out using Jest mocks.
      React Testing Library - Events and Async (youtube.com)
      Jan 31, 2019
      In this video we'll see how to fire events (click) and how to wait for elements to appear on the screen when the code is asynchronous.
      Intro to React Testing Library (youtube.com)
      Jan 29, 2019
      We'll investigate how to easily test our React components using the React Testing Library an alternative to Enzyme that works alongside Jest. This is an introduction, covering installation, snapshots, finding elements and verifying certain attributes on those elements.
      React Suspense with CPU intensive background functions (youtube.com)
      Jan 23, 2019
      In this video we'll create a custom hook called useWorker which will execute CPU intensive code on a worker thread rather than the main browser thread... we'll make our hook "suspense friendly" with promises.
      Custom fetch hook that works with React Suspense (youtube.com)
      Jan 22, 2019
      In this video we'll dive deep into suspense, creating a custom hooked called useFetchSuspense that will make an AJAX call with fetch, playing nicely with Suspense to handle showing the loading fallback component while the call is being asynchronously executed.
      Intro to Suspense and React.lazy (youtube.com)
      Jan 21, 2019
      In this video we'll look at the smallest Suspense example I can think of :D It is part 1 of a 4 part series I'm doing on Suspense.
      Suspense with @reach/router and React.lazy (youtube.com)
      Jan 21, 2019
      In this video we'll show how to use Suspense along with @reach/router and React.lazy to code-split and lazy-load each route/page of our application, showing a fallback component while it's loading.
      Implementing a "Blur Up" image component (youtube.com)
      Jan 04, 2019
      In this video we'll be using promises to see how a Gatsby style "Blur Up" image component could be created.
      Using Apollo Link State (youtube.com)
      Dec 09, 2018
      In this video we learn how to use the apollo-link-state library to Mutate and Query our local state. Link State is an alternative to using React's Component level state, MobX, or Redux... access and mutate your data in the same way you communicate with external GraphQL APIs.
      React Hooks with Apollo GraphQL (youtube.com)
      Dec 08, 2018
      We'll transform some React code using the Query component from Apollo GraphQL to use hooks! The code ends up being WAY cleaner and easier to reason about.
      Gatsby & TypeScript (youtube.com)
      Dec 01, 2018
      Learn how to set up Gatsby with TypeScript and how to replace PropTypes with TypeScript interfaces in both functional and class based components.
      GraphQL with your REST endpoints with RestLink (youtube.com)
      Nov 05, 2018
      If you need to talk with a RESTful endpoint alongside your GraphQL API, adding RestLink allows you to seamlessly perform GraphQL queries to interact with those REST endpoints.
      Beyond Apollo Boost - Configuring the Apollo Client from the ground up (youtube.com)
      Nov 03, 2018
      When Apollo Boost no longer provides you the flexibility you need, it's time to reach for the Apollo Client library and configure things yourself. In this video we go over the conversion process and how to use some comment links such as link-error, link-context, and link-http.
      GraphQL with ApolloBoost Client (youtube.com)
      Nov 02, 2018
      Don't know where to begin with GraphQL in React? Begin by setting up a client with ApolloBoost and make a Query! In this video we pull my starred repositories from the GitHub GraphQL API.
      What are React hooks? (youtube.com)
      Oct 27, 2018
      In this video we cover React hooks by refactoring a class based component into a functional component which takes advantage of the useState and useEffect hooks.
      What is React memo? (youtube.com)
      Oct 24, 2018
      A quick video showing off the new React.memo feature which was just launched today in React v16.6.0. It'll make your functional components more performant as long as they are pure (same input - props - equals same output every time).
        How to use GraphQL with React (youtube.com)
        May 13, 2018
        We'll take a look at how to use GraphQL with React using the Apollo GraphQL library and GitHub's new GraphQL API. We'll look at setting up our client, provider, and finally writing and executing our GraphQL query.
        Mocking Axios in Jest + Testing Async Functions (youtube.com)
        Apr 13, 2018
        In this video we'll look at a function that makes an HTTP request using the axios library to the Unsplash API and figure out how we can test it using a fake/mock version of axios to avoid performing real HTTP requests. We will be using Jest and some mocking functionality that it provides.
        Introducing the React Context API (youtube.com)
        Apr 10, 2018
        We'll take a look at the new React Context API, how to use it, what it does, and if it should replace Redux or MobX for your go-to state management option.
        Testing Asynchronous Components with Mocks in Jest (youtube.com)
        Apr 06, 2018
        In this video we'll cover how to test React components that contain asynchronous code using mocks in Jest. We'll refactor our component to make it more easily testable and mockable, allowing the test to run without making an actual AJAX request.
        Error Boundaries and Render Props (youtube.com)
        Apr 05, 2018
        How to implement and test an error boundary in React. Error boundaries allow us to catch errors (and display friendly messages to our users) that occur during render in our components. We'll implement the error boundary using render props and see how to suppress an annoying error message during testing.
        Getting started with testing in React (youtube.com)
        Mar 29, 2018
        In this video we talk about how to test components in React within create-react-app, how to configure Jest with Enzyme and Sinon, how to test with snapshots, simulate clicks, and interact with DOM elements through Enzyme.
        Easy MobX and Redux Comparison (youtube.com)
        Mar 24, 2018
        We take an app from component state to MobX, then the same app from component state to Redux and talk about the differences. Async code in both MobX and Redux is covered!
        Introduction to React Motion Tutorial (youtube.com)
        Mar 17, 2018
        We'll take a look at how to get up and running with React Motion to animate an element into and off of the screen based on a toggle value in the state.
        Async in MobX (youtube.com)
        Mar 10, 2018
        4 ways to do Async code in MobX. We'll cover MobX 4, but show how it would be done in MobX 3.
        Using Refs in React (youtube.com)
        Feb 25, 2018
        We'll go over the 3 ways to create refs in React: string refs (don't use!), callback refs, and the new React.createRef() approach.
        Introduction to MobX State Tree (youtube.com)
        Feb 17, 2018
        Here we look at how MobX State Tree works and how it compares to MobX.
        MobX in create react app without ejecting (with CRA 1) (youtube.com)
        Feb 09, 2018
        In this video we'll see how we can use MobX (with decorators!) without having to eject from create react app. You can also use this technique to add other babel plugins or modify your webpack config without ever needing to eject.

        Articles & Tutorials

        Finite State Machines in React (telerik.com)
        Sep 26, 2019
        What are Finite State Machines and how can you use them in React to make complicated logic and UIs easier to grasp? In this article we’ll set out to provide an answer to this question by building a video player in React.
        Secrets and Environment Variables in Next.js and Now (leighhalliday.com)
        Sep 07, 2019
        Zeit has great documentation, but it took me a while to understand the difference between environment variables (secrets) on the serverless side vs how to get env vars exposed and available to the React code which runs client side, in the browser.
        Forms in React (telerik.com)
        Sep 05, 2019
        Form Development in React comes down to three things: Data, Validations, and Submission. See how to handle these yourself or using Formik to make things simpler.
        Maps in React (telerik.com)
        Aug 20, 2019
        Knowing the similarities and differences between Google Maps and MapBox within a React app will help you pick the right tool for the job. This article compares and contrasts these two popular libraries, getting you up and running with whichever one you choose.
          Mocking and Testing GraphQL in React (telerik.com)
          Jul 31, 2019
          Testing GraphQL doesn't have to be difficult. This article will explore static and dynamic mocks to make testing GraphQL a breeze.
          Using the useEffect hook (leighhalliday.com)
          Mar 28, 2019
          In this article we'll look at how to get an effect to run after every render, just once, or when a particular piece of data changes. We'll also look at the difference between the effect itself, and how to clean up after itself.
          Async Axios in React Testing Library (leighhalliday.com)
          Mar 07, 2019
          In this article we'll take a look at how to handle async code in React Testing Library, specifically at how to test and mock a call using Axios.
          Firing Events in React Testing Library (leighhalliday.com)
          Mar 07, 2019
          In this article we'll see how to fire and test events in our React components using the React Testing Library.
          Async MobX in React Testing Library (leighhalliday.com)
          Mar 07, 2019
          In this article we'll take a look at how to handle async code in React Testing Library, specifically at how to test and mock a call using Axios.
          TypeScript and React, BFF (telerik.com)
          Feb 28, 2019
          TypeScript and React are an increasingly common pair. Learn how to get up and running with TypeScript for your next React project.