Leigh Halliday

Video Guides & Talks

React Query - Data Fetching Hooks (youtube.com)
Mar 18, 2020
React Query is a fantastic tool that enables you to fetch remote asynchronous data inside of your components. It could be GraphQL, REST, or any other data source which responds with a promise. It comes with its own dev tools to visualize what it is doing, and a ton of amazing functionality such as stale-while-revalidate, refetch on focus, error handling, etc...
    React Router v6 Tutorial in 15 Minutes (youtube.com)
    Mar 07, 2020
    React Router v6 is both the next version of React Router v5 but also @reach/router... it's a coming together of all the best things from both routers in an easy to use light-weight package. In this tutorial we'll cover all the basics from routing, nested routes, dynamic routes, linking to catch-all routes in just over 15 minutes.
    React Stripe Elements Package (NEW 2020) (youtube.com)
    Feb 22, 2020
    Stripe just came out with a new version of their Stripe Elements for React package, so let's try it out! We'll create a simple form, send that data to the backend where we'll use Stripe in Node to charge the card that comes from Stripe Elements.
      That React Component Right Under Your Context Provider Should Probably Use React.memo (youtube.com)
      Feb 18, 2020
      Sophie Alpert - former manager of the React team at Facebook - mentioned in a tweet "That React Component Right Under Your Context Provider Should Probably Use `React.memo`"... in this video we're going to explore what she meant, what the issue is, and how to solve it.
      GraphQL Pagination with Cursors in Apollo React (youtube.com)
      Feb 13, 2020
      Apollo provides a function made for fetching additional paginated results, but it isn't directly obvious how it works! In this video we will walk through Cursor based GraphQL Pagination in Apollo React.
      Building a GraphQL server in Next.js (youtube.com)
      Feb 10, 2020
      In this video, we will learn how to use API routes to set up a GraphQL API within a Next.js app.
      Mastering the basics of SEO in React and Next.js (youtube.com)
      Jan 27, 2020
      SEO from a technical perspective is nothing more than adding a few meta tags, right? Sorta... in this video we'll take a basic Next.js application, and get it to a score of 100 in Lighthouse Audit.
      How to NOT render something in React (youtube.com)
      Jan 21, 2020
      We cover 5 ways to either not render an element or to have it hidden, and then we'll write tests to verify the presence or lack of presence of an element, and whether an element has a class or not using React Testing Library.
      Clustering data in Google Maps and React (youtube.com)
      Jan 06, 2020
      In this video we will create a Google Map in React, loading remote data from an API, clustering it, and then zooming in programmatically to expand a cluster.
        React Data Fetching with Hooks using SWR (youtube.com)
        Dec 16, 2019
        We will show how to use SWR, how to configure it globally, and a pattern I like to use which separates data fetching from data display.
        Introduction to MobX & React in 2020 (youtube.com)
        Dec 02, 2019
        A lot has changed since my first MobX video about 2 years ago. This is an updated version of that, covering hooks and how to use modern MobX with functional components.
        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

              How to Show and Hide Elements in React (telerik.com)
              Mar 13, 2020
              Without if statements in JSX, how do you control your application's flow? Let's explore how to render or NOT render elements in React.
              ASTs, Markdown and MDX (telerik.com)
              Feb 27, 2020
              Markdown for documents, React for interaction, MDX for both! But how do Markdown and MDX arrive at HTML and JSX? The answer is Abstract Syntax Trees.
              Building a GraphQL server in Next.js (blog.logrocket.com)
              Feb 10, 2020
              In this article, we will learn how to use API routes to set up a GraphQL API within a Next.js app. It will start with the basic setup, and then cover some more in-depth concepts.
              Leaflet Marker Clustering (leighhalliday.com)
              Jan 08, 2020
              Performance can begin to degrade pretty quickly when you are trying to show large amounts of data on a map. Even at hundreds of markers using Leaflet via React Leaflet, you may feel it start to lag.
                How to use React-Leaflet (blog.logrocket.com)
                Jan 01, 2020
                In this article, we’ll see how to use React-Leaflet to render Leaflet maps inside of your React app. We’ll show markers with custom icons, and display a popup on the map when clicked. Later, we will see what needs to change to load remote vs local data using SWR.
                  Google Maps Marker Clustering (leighhalliday.com)
                  Dec 29, 2019
                  This article shows how to integrate clustering with supercluster into your React with Google Maps app.
                    Replacing Redux with React Hooks (leighhalliday.com)
                    Dec 18, 2019
                    Redux has been the go-to way to manage state within your React application for years. It's popularity is due in large part because when it was introduced, it solved a number of problems which were difficult to do in vanilla React on its own.
                    How Does SWR Work? (leighhalliday.com)
                    Dec 15, 2019
                    SWR is a great package from Zeit to help make it easier to fetch remote data with hooks. It is based on the stale-while-revalidate RFC, which in simple terms says to show stale (old) data while you are fetching a new version of the data.
                    Observing Visibility in React (telerik.com)
                    Oct 16, 2019
                    The IntersectionObserver API allows us to track the visibility of HTML elements, but how do you use it within React?
                      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.