Leigh Halliday

Articles & Tutorials

Building an Ecommerce Operational Dashboard in React (telerik.com)
Oct 26, 2020
We will be constructing an Operational Dashboard in React for an ecommerce store, utilizing a number of charts and components from KendoReact.
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.

            Video Guides & Talks

            Using the KwesForms form service with React (youtube.com)
            Oct 22, 2020
            In this video we'll learn how to add the KwesForms form service to a React / Next.js app. We'll create custom validation, learn about answer piping, and talk about notification and confirmation emails.
            Image Uploads to Cloudinary in React with Drag & Drop (youtube.com)
            Oct 20, 2020
            In this video we upload images directly to Cloudinary straight from the browser in React using Drag & Drop courtesy of react-dropzone. We'll cover both unsigned and signed approaches by utilizing Next.js' API pages to hide our secrets.
            Adding Authentication to Next.js (GitHub Connect, JWT + Prisma 2 Integration) (youtube.com)
            Oct 05, 2020
            In this video we'll se NextAuth.js to easily add authentication to our Next.js application. We cover the GitHub provider, starting out without a database using JWT only, and later integrating Prisma 2 to store our users and their sessions in a database.
            Draggable Divs with Recoil State Management (youtube.com)
            Sep 01, 2020
            In this video we'll manage a dynamic number of Draggable Boxes (divs) inside of Recoil, computing/deriving a bounding box around these boxes using their positions on the page. We use react-draggable to make the draggable functionality possible.
            Tracking Errors & Performance in Next.js with AppSignal (youtube.com)
            Aug 26, 2020
            In this video we cover how to add error and performance tracking to Next.js with AppSignal. We'll do this by adding a custom server to support server-side performance tracking.
            Apollo Client v3 Fullstack Next.js Setup with SSR + Nexus Schema (youtube.com)
            Aug 17, 2020
            In this video we recreate the Next.js example setting up Apollo Client v3, Apollo Server, Nexus Schema, with support for SSR.
            Build your own GraphQL Resume with Next.js, Apollo Client, and Prism Code Highlighter. Part 2 / 2 (youtube.com)
            Aug 15, 2020
            In part two we will build out the frontend of our GraphQL Resume. First we set up the Apollo Client, then fetch and display the data that comes back from our GraphQL API. Lastly we add Prism Code Highlighter to show display the GraphQL query which retrieved the data we are displaying.
            Build your own GraphQL Resume with Next.js, Apollo Server, and Nexus Schema. Part 1 / 2 (youtube.com)
            Aug 11, 2020
            In this video we will use a code-first approach to building a GraphQL API. This means that the code we write will generate the GraphQL schema as an artifact rather than something we have to maintain ourselves.
            Creating a User Registration form with react-hook-form (youtube.com)
            Jul 31, 2020
            We'll create a User Registration Form in Next.js using react-hook-form, testing its validation with react testing library.
            Introduction to React Recoil (Experimental) State Management (youtube.com)
            Jul 30, 2020
            In this video we'll learn about Recoil React State Management which is a new and experimental state management library from Facebook. It is great for when your components are highly relational, when you have derived/computed state, and when you want to avoid re-rendering the entire tree when only certain parts of your state have updated.
            Full Stack Next.js & MongoDB from Start to Finish (youtube.com)
            Jul 23, 2020
            In this video we'll take a React map in Next.js, and build out the backend, storing our data in MongoDB. We'll see how to connect the frontend to the backend, connecting to the database, interacting with it, and some gotchas that you may encounter.
            Deploying Next.js to Vercel with Environment Variables (youtube.com)
            Jul 05, 2020
            Let's deploy a Next.js app to Vercel! This app contains two types of Env variables... one we want to include in the public build of our app, and another we only want available during "runtime", which means in this case when the serverless api functions are executed... these env variables in runtime are secret!
            Building a Backend for React with Next.js, Prisma 2, and Postgres (youtube.com)
            Jun 24, 2020
            In this video we will take an existing React app using Google Maps, and using Next.js (API routes), Prisma 2, and Postgres, we will learn how to read data from, and save data to our database.
            Posting Data to Server from React - Query Updates from Mutations (youtube.com)
            Jun 18, 2020
            In React you often need to persist data to the server. This video shows how to use react-query mutation functionality to post data to the server, and update the UI with fresh content. We cover three approaches to UI updates, going from easiest but worst performing, to most complicated but best performing.
            Don't Mock Fetch (or Axios): Use Mock Service Worker and Test Like a User (youtube.com)
            Jun 08, 2020
            Despite having launched a video showing how to mock both Fetch and Axios recently... here is another solution, the one recommended by Kent C. Dodds (creator of React Testing Library), showing how to use Mock Service Worker to avoid making actual HTTP requests when you are running your tests.
            Web Speech API & React Tutorial - Word Matching Game (youtube.com)
            May 28, 2020
            In this video we'll cover the Web Speech API, building a word matching game for learning a language, similar to one of the features that DuoLingo has.
            Google Maps & Google Places in React (youtube.com)
            May 18, 2020
            This video covers a "Bear Sighting" React App where we learn how Google Maps, Google Places, and browser geolocation works. All using modern React (hooks) and up to date packages for 2020.
              Mocking Fetch in React Components (youtube.com)
              May 17, 2020
              In this video we'll test that a react component renders correctly when making a fetch call via the useSWR hook. We then mock the function that calls fetch, rather than fetch itself, to focus on the interface rather than the internal implementation details.
              Mocking Fetch Using jest-fetch-mock (youtube.com)
              May 16, 2020
              This video focuses on testing a function which makes a fetch call, mocking fetch using the jest-fetch-mock package rather than mocking the module manually ourselves (like we did in the previous video).
              Drag n' Drop Files in React - Parsing CSVs (youtube.com)
              May 02, 2020
              In this demo we handle drag n' drop file functionality in React in order to parse CSV files, extracting contact defaults to place into our state.
              9 React conditional rendering methods (youtube.com)
              Apr 27, 2020
              Controlling the flow of your React application is crucial to getting the result that you are looking for. Learn more about React conditional rendering methods in this video.
              Instagram Style Route as Modal in Next.js (youtube.com)
              Apr 23, 2020
              This is an example of how to do routing as a modal in Next.js, where when the user clicks a link, content is shown within a modal, but when the user refreshes the page, they are on a dedicated page for that content.
              Fetch props directly from the Database?!?! New Hooks in Next.js 9.3! (youtube.com)
              Apr 19, 2020
              Fetch your props directly from the Database?!?! Adam Wathan showed a simple example of loading props directly from the database.
              Dark Mode w/ Custom React Hooks using Local Storage (youtube.com)
              Apr 10, 2020
              Creating a custom hook in React to store state in local storage, synchronize it across browser tabs, and have its value retrieved on page refresh. We will be looking at a form input as well as how you could use this technique to create a persistent Dark Mode on your website.
              gqless: GraphQL Without GQL in React (youtube.com)
              Apr 06, 2020
              In this video I experiment with a new and very alpha library called gqless which allows you to simply access your data, and it will perform the necessary GraphQL query to actually fetch it.
              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.