Dave Ceddia

Articles & Tutorials

Using Forms in React (daveceddia.com)
May 12, 2021
In this article we’ll be focusing on using plain React, with no libraries. You’ll learn how forms really work, so you can confidently build them yourself. And if later you choose to add a form library, you’ll know how they work under the hood.
How to Read React Errors (fix 'Cannot read property of undefined'!) (daveceddia.com)
Apr 01, 2021
We’ll cover how to read a stack trace, how to interpret the text of the error, and ultimately how to fix it.
React State Management Libraries and How to Choose (daveceddia.com)
Mar 17, 2021
In this post I’ll give you the Grand Tour of state management options in React and help you decide which one to use in your project.
State of the React Ecosystem in 2021 (daveceddia.com)
Jan 20, 2021
This post is inspired by a now-deleted Reddit post from someone who had learned React in 2016, and was concerned about how to get back into it and refresh their skills.
    Run Code in React Before Render (daveceddia.com)
    Oct 27, 2020
    Want to run some code before your React component renders? There are a few ways to make this work, and we’ll talk about them here.
      Build A Confirmation Modal in React with State Machines (daveceddia.com)
      Aug 19, 2020
      Ever needed to wire up a confirmation dialog in React? You know the ones: “Really delete this file? — Yes / Cancel”
      Fix useEffect re-running on every render (daveceddia.com)
      Aug 04, 2020
      If your useEffect function is running too often, triggering on every change, look at its dependencies. Here we use the functional form of setState to reduce how often the effect runs.
      Smaller React Projects, with Parcel (daveceddia.com)
      Apr 21, 2020
      I think the Parcel bundler is a great fit for this use case: it requires zero configuration and installs with a minimal footprint. In this post I’ll show you how to set it up.
      Using Tailwind CSS with Create React App (daveceddia.com)
      Mar 30, 2020
      I’ve been hearing a lot about Tailwind CSS lately and I wanted to give it a try, but I wanted to combine Tailwind with Create React App. In this post I’ll show you how to use Create React App with Tailwind CSS in just a couple quick minutes.
      Complete React Tutorial for Beginners (2020) (daveceddia.com)
      Jan 15, 2020
      This article is designed for total beginners to React, as well as folks who’ve tried to learn in the past but have had a tough time. I think I can help you figure this out.
      Why React has been Hard to Learn (daveceddia.com)
      Oct 21, 2019
      The hardest thing about React? Well, it’s different for each person, but I daresay everyone struggles somewhere along the way.
      How I Learned React (daveceddia.com)
      Oct 17, 2019
      Breaking up big problems into tiny bite-sized ones is the only way to really get anything done in this world. It’s how I taught myself React, and it’s how I approach a lot of problems in software.
      React is Trending (daveceddia.com)
      Oct 14, 2019
      React is all the rage these days. It has been for a while now, honestly.
        Why I Got Into React (daveceddia.com)
        Oct 10, 2019
        Back in 2014 (ye olden times) I got my first front end job. Up until then, I was mostly a back end developer.
          When to useLayoutEffect Instead of useEffect (daveceddia.com)
          Sep 20, 2019
          There are two React hooks, useEffect and useLayoutEffect, that appear to work pretty much the same.
          Redux Selectors: A Quick Tutorial (daveceddia.com)
          Mar 26, 2019
          You might’ve run up against this concept in Redux called a “selector.” In this short tutorial I’ll explain what selectors are, why they’re useful, and when (and when not) to use them.
          A Complete React Redux Tutorial for 2019 (daveceddia.com)
          Mar 10, 2019
          In this Redux tutorial I’m going to explain how to use Redux with React incrementally – starting with plain React – and a very simple React + Redux example. I’ll explain why each feature is useful (and when you can skip some).
          Access the Redux Store Outside a React Component (daveceddia.com)
          Feb 26, 2019
          The React Redux connect function works great for regular React components, but if you need access to the Redux store in a plain function, the technique is a bit different. In the examples below I’ll show how to access a JWT token from the Redux store, but the techniques will work with any data you might have.
          Start a Blog in 2019 with Gatsby.js and Netlify (daveceddia.com)
          Jan 30, 2019
          Here in Part 1, we’ll cover the nuts and bolts of getting a Gatsby blog set up and deployed.
          4 Examples of the useState Hook (daveceddia.com)
          Oct 30, 2018
          Converting function components to classes is a pain. The useState hook can help. Here's how it works, and examples of how to use it.
          How to Use the useReducer Hook (daveceddia.com)
          Oct 30, 2018
          How you can take advantage of the useReducer hook to manage complex state in your components, and what this new hook might mean for Redux.
          A Simple Intro to React Hooks (daveceddia.com)
          Oct 28, 2018
          Learn how React's new Hooks feature works, and how Hooks can make your code cleaner and easier to write.
          Customize Create React App Structure with Bash (daveceddia.com)
          Oct 15, 2018
          Create React App (CRA) is great. Recently updated to version 2, it now supports Sass out of the box and a bunch of other cool stuff.
          Computed Properties in React (daveceddia.com)
          Aug 14, 2018
          Frameworks like Vue have the notion of “computed properties” – a way to derive some new, possibly complex data based on something passed in. This post covers how to achieve the same result in React.
          How to Display a List in React (daveceddia.com)
          Aug 06, 2018
          You’ve got a list of items. Now you just need to get them on the screen. What’s the “React way” to render a list?
          Pass Multiple Children to a React Component with Slots (daveceddia.com)
          Jul 31, 2018
          You can pass JSX into any prop, not only the one named children, and not only by nesting JSX inside a component’s tag – and it can simplify data passing and make components more reusable.
          Redux vs. The React Context API (daveceddia.com)
          Jul 17, 2018
          In this post I want to cover how the new Context API works, how it is similar to Redux, when you might want to use Context instead of Redux, and why Context doesn’t replace the need for Redux in every case.
          Perfect Pulled Pork with React Native, Expo, and Express (daveceddia.com)
          Jun 07, 2018
          Taking a Picture Every 30 Seconds and Sending It To A Server.
          Why Not To Modify React State Directly (daveceddia.com)
          Jun 01, 2018
          Everyone (and the React docs) say not to mutate state directly. Here's a live example of what happens when you do.
          Deploy React and Express to Heroku (daveceddia.com)
          May 18, 2018
          A step-by-step tutorial where you'll make a React app, an Express API server, and deploy both to Heroku.
          What Does Redux Do? (and when should you use it?) (daveceddia.com)
          Oct 25, 2017
          Read this to figure out what Redux is for, why it's useful, and when to use it.
          Learning React as an Experienced Developer (daveceddia.com)
          Oct 17, 2017
          How to learn React after you've been building software with something else for years.
          Learning React? Start Small (daveceddia.com)
          Jun 21, 2017
          I have been trying to learn React for the past year now, on and off. No matter how much I try, I just cannot seem to get off the tutorials. The code just isn’t intuitive.
          How to Structure Your React Project (daveceddia.com)
          May 22, 2017
          One of many ways to organize the files in a React project.
          Snapshot Testing React with Jest (daveceddia.com)
          Apr 05, 2017
          Testing is a double-edged sword. On one hand, having a solid test suite makes code easier to refactor, and gives confidence that it works the way it should. On the other hand, tests must be written and maintained. They have a cost, like any other code.
          Reusable State with Higher Order Components (daveceddia.com)
          Mar 28, 2017
          Higher-order components are a great way to extract repeated state or lifecycle methods from your React code.
          Where to Fetch Data: componentWillMount vs componentDidMount (daveceddia.com)
          Mar 21, 2017
          When you need to fetch some data for a React component, where do you do it?
          A Visual Guide to State in React (daveceddia.com)
          Oct 19, 2016
          React's "state" is one of the more difficult concepts to learn. Not just what to put in state, but what it actually is and what it’s for. And also how Redux is related to React state. I hope to clear up some of the confusion in this article.

          Courses & Video Series

          useEffect Over Lunch (useeffectoverlunch.com)
          Sep 18, 2020
          Get confident with useEffect in under an hour.
          Pure Redux (daveceddia.com)
          Mar 19, 2019
          You can be productive with Redux and React, and this video course will help you do it. You’ll get hands-on practice by building an app in React, and then refactoring it to use Redux. That’ll give you the basics.

          Video Guides & Talks

          A Guided Tour of React Hooks (youtube.com)
          Nov 19, 2019
          In this talk you'll learn about the "magic" behind how Hooks work and get to see a few examples of them in action. We'll cover the big four: useState, useEffect, useReducer, and useContext, plus how to write your very own custom hooks.
          React Practice Project Ideas (youtube.com)
          Oct 30, 2019
          To get good at React you've gotta build stuff. But, what should you build? How can you pick good project ideas that are fun, not-too-easy, and not too hard?
          A Strategy for Learning React (or anything, really) (youtube.com)
          Oct 29, 2019
          Learning React can seem like a monumental task. There's React, Redux, routing, API calls, Context, Hooks, Suspense(?)... it's a lot. Let's chat about how to simplify things.
          React Context API vs. Redux (youtube.com)
          Oct 28, 2019
          With Context, useContext, and useReducer, do you even still need Redux? What's the difference between Context and Redux anyway?
          Write Custom Hooks to Clean Up Your Code (daveceddia.com)
          Jun 18, 2019
          React hooks make it easy to add a single piece of state to a component. But it’s also a breeze to write your very own custom hooks, just by moving the hooks-related code into a function.
          React Hooks: a Guided Tour (youtube.com)
          Nov 23, 2018
          Dave will give an introduction to hooks and the motivation behind them, show examples of hooks in practice, and explain how you can try them out yourself.
          Testing API Contracts with Snapshots (youtube.com)
          Dec 04, 2017
          Dave Ceddia talks about using Jest's snapshot testing to verify your APIs are working as expected.

          Books & Guides

          Pure React (daveceddia.com)
          Aug 25, 2019
          Learn vanilla React, without all the libraries. A hands-on, learn-by-doing intro to React for beginners.

          Podcast Episodes

          Animations and React Morphe with Bruno Lorenco (devchat.tv)
          Aug 20, 2019
          Bruno talks about what React Morph is, how it originated, and the flip animation technique. React Morph is uniquely designed to be compatible with many platforms. Bruno talks about his goal to make everything simpler, from having animations on your website, to making things easier for users of the application.
          • Dave Ceddia
          • Thomas Aylott
          • Leslie Cohn-Wein
          • Lucas Reis
          • Bruno Lorenco
          Learning React and TypeScript in Public with Shawn "swyx" Wang (devchat.tv)
          Aug 13, 2019
          Today’s guest Shawn Wang is a career changer starts off the show about how he got from finance to programming. The panel talks about how they each got started in programming. Shawn explains his Learn In Public manifesto. They discuss the benefits of learning in public and how concepts like Cunninham’s Law and lampshading can be a good thing.
          TypeScript and ReasonML Christoffer Niska (devchat.tv)
          Aug 06, 2019
          The panel discusses the affect learning another language has on how you write the code you’re working on. They talk about TypeScript and Christoffer shares how he got into it.
          React Hooks for Global State and More Custom Hooks with Daishi Kato (devchat.tv)
          Jul 30, 2019
          Daishi talks about his definition of global state, how it differs from a regular state, and why it is a problem with the current context implementation.
          Drawing the Line Between 3rd Party and Custom Code with Glenn Reyes (devchat.tv)
          Jul 16, 2019
          Today the panel discusses how to choose between picking a 3rd party or handcraft component in React. They discuss the popular notion to avoid “reinventing the wheel” and always using 3rd party components.
            The State Machines in React with David Khourshid (devchat.tv)
            Jul 09, 2019
            The panel discusses what a state is in React. David defines a state as a moment in time. States can change, when they do, that’s a state transition. They talk about the utility of states and thinking about your app as a state machine.
            Design Systems with Varya Stepanova (devchat.tv)
            Jul 02, 2019
            Varya talks about how a component library turns into a design system and shares some of her experience. She talks about how the concepts in a design system are influenced and created by the existing interface.
            CSS, CSS-in-JS, and Future of the Frontend (devchat.tv)
            Jun 25, 2019
            The panel shares their first experiences with CSS and compares CSS and CSS-in-JS. The best ways to learn CSS is considered. The panel shares some coding tips; considering when to use libraries and when to use homegrown solutions.
            Accessibility is not a “React Problem” with Leslie Cohn-Wein (devchat.tv)
            Jun 18, 2019
            Leslie Cohn-Wein joins the panel to discuss accessibility. She explains how she got passionate about accessibility. The panel discusses what you have to do to become accessible.
            useEffect The Good, the Bad, and the Gotchas (devchat.tv)
            Jun 11, 2019
            The panel starts by discussing if useEffect is a good API or a bad API. The problems that useEffect solves are considered. The panel agrees it is a much better abstraction where subscriptions are concerned. Suspense and data fetching is discussed, the panel considers what the react team has in store concerning data fetching.
            Optimizing for Performance in React with Aggelos Arvanitakis (devchat.tv)
            Jun 04, 2019
            Aggelos Arvanitakis shares things he has learned from his mistakes in his blog posts. The panel discusses the most common problems in react that causes poor performance.
            Fullstack Development with React (devchat.tv)
            May 28, 2019
            On today’s show the panel discusses what what jobs should be delegated to the front and backend when doing fullstack development with React. They talk about where the data fetching starts coming into play in a react app and the big changes from the old web to the modern web in data fetching.
            Image Lazy Loading in React (devchat.tv)
            May 21, 2019
            Today’s show has the panel discussing image lazy loading in React. Image lazy loading is the notion that images that are below the fold (rendered outside of your browser view when you initially load a page) are deferred and loaded later, so that your page loads faster.
              Linked Lists in the Wild: React Hooks with Conlin Durbin (devchat.tv)
              May 07, 2019
              The panel discusses Conlin’s article "Link Lists in the Wild: React Hooks".
              RRU 045: React Hooks with Dave Ceddia (devchat.tv)
              Jan 23, 2019
              Hot Reloading in Create React App with Dave Ceddia (devchat.tv)
              May 01, 2018
              In this episode of React Round Up, the panel discusses hot reloading with Create React App with Dave Ceddia. They talk about what hot reloading is, when you would want to use it, and how you can set it up in your code. They also touch on ways to customize Create React App, the disadvantages to customizing, and the key points to understand about Create React App before modifying it.