Dave Ceddia

Articles & Tutorials

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.

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.

      Video Guides & Talks

      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.

      Courses & Video Series

      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.