Robin Wieruch

Articles & Tutorials

How to use React memo (
Jun 09, 2020
React's memo API can be used to optimize the rendering behavior of your React function components. We will got through an example component to illustrate the problem first, and then solve it with React's memo API.
How to use React Testing Library Tutorial (
Jun 01, 2020
In this React Testing Library tutorial, we will go through all the steps necessary to unit test and integration test your React components with confidence.
Computed Properties in React (
May 18, 2020
Today I came across a question in my Newsletter regarding computed properties in React. I didn't know about the term computed properties before, because such a term doesn't really exist in React, but it exists in other frameworks like Vue. Maybe I would call it computed values, computed state, or derived state (not from props though) in React.
    How to update state from props in React (
    May 18, 2020
    It doesn't happen often, but sometimes you have to update state from props in React. In this brief walkthrough, I want to show you a use case where you would want to derive state from props and how to do it for the initial props and updated props. Keep in mind that this concept should only be used rarely though, because often there is no need to initialize state from props.
    How to manage React State with Arrays (
    May 17, 2020
    This tutorial walks you through the most common scenarios for managing arrays in React state. For each I want to show you a array example in React state, such as how to push an item to an array or how to update an item in an array, when React state is used to store it.
    Add an Item to a List in React (
    May 14, 2020
    It's a common task in React to add an item to a list. Here I want to show you briefly how this works. Every time you want to modify something in React, for example a list where you want to add an item, you have to use React's state management.
    How to CSS Style in React (
    May 10, 2020
    Follow me on this React journey to learn more about these different strategies and approaches in CSS to style your React components.
    How to use React Ref (
    Apr 25, 2020
    In this React Ref tutorial, I want to give you a step by step introduction to refs in React.
    How to Micro Frontend with React (
    Mar 10, 2020
    Micro Frontends are the equivalent for Microservices: Whereas microservices are an architecture to split up monolithic backend applications into smaller services, micro frontends can be used to achieve the same on the frontend. But they are not as popular as microservices yet.
    How to Docker with create-react-app (
    Feb 18, 2020
    Just recently I had to use Docker for my create-react-app web application development. Here I want to give you a brief walkthrough on how to achieve it.
    React Internationalization wit i18n (
    Feb 12, 2020
    When my last client asked me about internationalization in React, I went through all the hoops to prepare a presentation for them. In this React tutorial, I want to show you the gist of what I have learned about translating a React application.
    React Libraries in 2020 (
    Jan 28, 2020
    The following article will give you an opinionated approach to select from complementary libraries to build a well-rounded React application. It's up to you to exchange them with your choices.
      React Conditional Rendering (
      Jan 16, 2020
      The article aims to be an exhaustive list of options for conditional renderings in React and best practices for these patterns.
      React Event Handlers: onClick, onChange ... (
      Jan 15, 2020
      In this React tutorial, we will get to know event handlers in React for HTML elements such as button and input elements. You will learn how to use a button with its onClick event and how to define and use different kinds of event handlers. Essentially we will go through three kinds of event handlers: event handlers, inline event handlers and callback event handlers.
      How to React Range (
      Dec 02, 2019
      In this React component tutorial by example, we will create a React Range Component with React Hooks and a Function Component.
      How to React Slider (
      Dec 02, 2019
      In this React component tutorial by example, we will create a React Slider Component with React Hooks and a Function Component.
      How to useContext in React? (
      Oct 19, 2019
      React's Function Components come with React Hooks these days. Not only can React Hooks be used for State in React but also for using React's Context in a more convenient way. This tutorial shows you how to use React's useContext Hook.
      How to use CSS Modules in React? (
      Oct 19, 2019
      CSS Modules are one of the most popular ways for styling React components. Whether you are using only CSS or a more advanced pre-processor like SASS, it doesn't matter for CSS Modules: You can write all these styles in your style sheet files next to your React components.
      React Context (
      Oct 17, 2019
      React Context is a powerful feature. If your React application grows in size beyond a small application, there is nothing wrong in giving it a shot. Many third-party libraries like Redux are using it under the hood anyway, so why not learning about it.
      React State (
      Oct 14, 2019
      In this extensive walkthrough, I want to guide you through all the possibilities of state management in React.
      Reasons to learn Redux as a JavaScript Developer (
      Sep 21, 2019
      Redux is a whole mindset shift for many people in the JavaScript community, who literally grew up with only web development, but never heard about function composition or immutability before. Whether Redux stays with us for a few more years or makes place for other state management libraries, it leaves a great legacy on how we develop modern web applications.
      How to test React-Redux connected Components (
      Aug 30, 2019
      React components connected to Redux can turn out pretty complex. Thus most people think that testing these complex components can turn out very complex as well. But it shouldn't be complex at all, if you take full control of the Redux store in your integration/unit test for the React component.
      How to Jest Snapshot Test the Difference (
      Aug 15, 2019
      Snapshot tests are a common way to write lightweight component tests. When a snapshot test runs for the first time, it stores its output (e.g. rendered component’s HTML structure) in a snapshot output file.
      How to shallow render Jest Snapshot Tests (
      Aug 10, 2019
      If you are using Snapshot Tests with Jest for your components, there are a few pitfalls you have to be aware of.
      Redux Persist with Next.js (
      Jul 25, 2019
      The following implementation shows you how to integrate Redux Persist into Next.js with a quick example.
      How to test React components with Mocha, Chai & Enzyme (
      Jul 21, 2019
      Before setting up the test setup with different testing libraries and writing the React component tests, you will need a simple React application which can be tested in the first place.
      End to End Testing React with Cypress (
      Jul 18, 2019
      End-to-end testing (E2E) was always a tedious task with testing frameworks from the past. However, nowadays many people are using for it. Their documentation has a high quality and their API is concise and clean.
      How to test React components with Jest & Enzyme (
      Jul 17, 2019
      In this React testing tutorial, we will introduce Enzyme in our Jest testing environment.
      How to test React components with Jest (
      Jul 16, 2019
      Jest got introduced by Facebook for testing JavaScript and especially React applications. It’s one of the most popular ways to test React components nowadays. Since it comes with its own test runner, you can simply call Jest from the command line to run all your tests.
      Gatsby.js - A powerful Static Site Generator (
      Jul 08, 2019
      Not long ago, most people argued against a framework like React, Angular or Vue for your personal website. Since then, tools on top of these frameworks – like Gatsby.js for React.js – emerged to make static website development effortless. So if there is no actual demand, why does a static website generator like Gatsby.js do so well?
      How to use Web Components in React (
      Jun 12, 2019
      In this tutorial, you will learn how to use Web Components, alias Custom Elements, in React.
        React useState with Callback (
        Jun 03, 2019
        If you have started to use React’s useState hook for your application, you may be missing a callback function, because only the initial state can be passed to the hook.
        How to useState in React? (
        May 30, 2019
        This tutorial goes step by step through a useState example in React for getting you started with this React Hook for state management.
        What are Reusable Components in React? (
        May 26, 2019
        In this tutorial, we will step through the process of making a component reusable for our React application.
        A React Lift State Up & Down Example (
        May 22, 2019
        In order to experience up and down lifting of local state, the following tutorial will demonstrate it with two examples.
        How to Redux with React Hooks? (
        May 20, 2019
        There are several React Hooks that make state management in React Components possible.
        React's useReducer vs Redux (
        May 13, 2019
        Now, many people keep wondering: Does useContext and useReducer replace Redux? As of the time of writing this article, React Hooks don’t replace Redux.
        How to Scroll to Item in React? (
        May 07, 2019
        A brief tutorial which shows you two use cases on how to scroll to an item within a list of items in a React List Component. We will use the native browser API to scroll to our React element with a button click. It’s up to you how to trigger the event in the end.
        How to useReducer in React? (
        Apr 28, 2019
        This tutorial goes step by step through a useReducer example in React for getting you started with this React Hook for state management.
        How to use SVG Icons as React Components? (
        Apr 23, 2019
        Today I want to give you a straightforward approach on how to use SVG icons as React components for your next React application.
        useReducer vs useState in React (
        Apr 17, 2019
        There are two main hooks that are used for modern state management in React: useState and useReducer. This tutorial doesn’t explain both React hooks in detail, but explains their different use case scenarios.
        What are Controlled Components in React? (
        Apr 10, 2019
        There are quite a lot of articles about React out there speaking about controlled and uncontrolled components without explaining them. It has been quite similar for my articles, whereas I always tried to add at least one or two sentences explaining them, but in the end, I thought it would be great to have a brief tutorial just showing a simple example for controlled components in React.
        React List Components by Example (
        Apr 06, 2019
        This tutorial for List components in React gives you a step by step walkthrough on how to render a list of simple primitives, how to render a list of complex objects, and how to update the state of your list in React.
        React State with Hooks: useReducer, useState, useContext (
        Apr 06, 2019
        In this tutorial, we will almost reach the point where these hooks mimic sophisticated state management libraries like Redux for globally managed state. Let’s dive into the application which we will implement together step by step.
        React Hooks: Migration from Class to Function Components (
        Mar 26, 2019
        This tutorial shows a migration path on how to write React Class Components as React Function Components with React Hooks. Therefore we will go into examples on how to migrate both state management and side-effects that are used in a Class Component to be used in a Function Component.
        React Function Components by Example (
        Mar 18, 2019
        React Function Components – also known as React Functional Components – are the status quo of writing modern React applications. In the past, there have been various React Component Types, but with the introduction of React Hooks it’s possible to write your entire application with just functions as React components.
        React Component Types: A complete Overview (
        Mar 12, 2019
        In this guide, I want to give React beginners an historical overview of different React Components and React Patterns. The goal is to give clarity about what React Component Types developers have at their disposal, which are still used in modern React applications, and why some of them are not used anymore.
        How to use MobX in React Firebase (
        Feb 10, 2019
        So far, it was fine to rely only on React’s local state and React’s Context API. This tutorial dives into using MobX on top of React and Firebase for the state management.
        How to use Redux in React Firebase (
        Feb 10, 2019
        This tutorial dives into using Redux on top of React and Firebase for state management. You will exchange React’s local state (e.g. users on admin page, messages on home page) and React’s context (e.g. session management for authenticated user) with Redux.
        React Component Composition (
        Jan 30, 2019
        In this tutorial, I want to step through React’s Component Composition step by step by evolving examples around this React pattern.
        How to use React Router with Firebase (
        Jan 01, 2019
        A React tutorial on how to combine React Router and Firebase to navigate a user through the application while fetching data from the Firebase database or even passing data through React Router.
        How to learn React.js in 2019 (
        Jan 01, 2019
        How to become a React developer in 2019. A guide that shows one how to learn React step by step, which JavaScript skills are needed to get started, and how to commit yourself every day to learn React.
        Email Verification with Firebase in React (
        Dec 20, 2018
        A Firebase React tutorial on how to enable email verification. Only users that confirmed their email address with a email confirmation have access to your application.
        React Redux Tutorial for Beginners [2018] (
        Dec 13, 2018
        A complete React Redux tutorial for beginners: Learn how to build React Redux applications from scratch by following this step by step implementation of an example application.
        Firebase Login with Facebook (
        Dec 07, 2018
        A tutorial on how to activate Facebook login for Firebase or Firestore where no email is required.
        Firebase Login with Twitter (
        Dec 07, 2018
        In this short visual guide, I want to show you how to activate the Twitter authentication for your Firebase or Firestore application.
        A visual Firebase Tutorial (
        Dec 07, 2018
        A short visual Firebase tutorial should help you to create your first Firebase application that can be used with any web framework/library such as React, Angular or Vue.
        How to link Social Logins with Firebase in React (
        Dec 06, 2018
        A Firebase React tutorial on how to link social logins with each other under one account. The example covers linking Google, Facebook, Twitter and email/password sign in methods.
        Social Logins in Firebase React: Google, Facebook, Twitter (
        Dec 02, 2018
        A tutorial on how to use social a login with Firebase in React. The example covers Google, Facebook and Twitter logins for user authentication.
        React Firebase Auth Persistence with Local Storage (
        Nov 27, 2018
        A tutorial on how to use local storage for auth state persistence for a Firebase in React application. When reloading the browser, the user should stay authenticated without a flicker.
        React Firebase Authorization with Roles (
        Nov 26, 2018
        A tutorial on how to use authorization with roles and permissions when using Firebase in React. Learn how to protect routes with authorization rules and how to set properties to Firebase user.
        A Firebase in React Tutorial for Beginners [2018] (
        Nov 20, 2018
        A beginners tutorial to learn Firebase in React for business application with authentication, authorization and a real-time database.
        How to fetch data with React Hooks? (
        Nov 12, 2018
        A tutorial on how to fetch data in React with Hooks from third-party APIs. You will use state and effect hooks for the data request from a real API.
        A GraphQL Tutorial for Beginners (
        Nov 01, 2018
        This GraphQL tutorial for beginners takes you on a journey to learn GraphQL. You will explore GraphQL with GitHub's GraphQL API and later learn how to build fullstack web applications with it ...
        A Apollo Client Tutorial for Beginners (
        Nov 01, 2018
        This tutorial shows you how to use Apollo Client for GraphQL without any other third-party library.
        How I built my own course platform (
        Oct 25, 2018
        From having the idea to launching your own product: The article is a case study on how I built my own course platform in React, Stripe, Firebase to give other people a platform to learn React.
        Prevent React setState on unmounted Component (
        Oct 21, 2018
        How to avoid the React warning: Can only update a mounted or mounting component.
        Writing Tests for Apollo Client in React (
        Oct 19, 2018
        The tutorial builds up on a mocked GraphQL API enabling you to write tests for your Apollo Client queries and mutations in React. It answers the question: How to test Apollo Client in React ...
        React Code Style with ESLint + Babel + Webpack (
        Oct 09, 2018
        You want to setup ESLint in your ReactJs project? But your project includes Babel and Webpack? This article will guide you through all the options with style guides such as Airbnb's style guide, the setup process for ESLint in React, and more beneficial recommendations to follow styling rules in your project.
        create-react-app with CSS Modules (
        Oct 03, 2018
        The article is a short how to use CSS Modules in your create-react-app application. It shows you how to setup CSS Modules, but also how to use it in your components.
        create-react-app with Sass (
        Oct 03, 2018
        A short guide on how to add Sass support to your create-react-app application which shows you how to setup Sass, but also how to use it in your React components.
        React Global State without Redux (
        Oct 02, 2018
        A tutorial to showcase how to use React global state without Redux. There are React patterns that can be used to have an application wide state in React without a state management library.
        All React Conditional Rendering Techniques (
        Sep 21, 2018
        Wondering how to perform a conditional render in React? The article is an exhaustive list of conditional renderings in React's JSX. How to use ternary operators, switch case and if else in React.js?
        How to prevent a rerender in React (
        Sep 11, 2018
        A React performance optimization tutorial which shows you React's shouldComponentUpdate lifecycle method and React's PureComponent API to prevent the rerendering of (child) components.
        Intersection Observer API in React (
        Sep 05, 2018
        A tutorial to learn about the Intersection Observer API in React. You will use React's ref API with createRef() to observe elements in your React application in context of the viewport.
          GraphQL Server Tutorial with Apollo Server and Express (
          Aug 22, 2018
          Learn how to build a GraphQL server with Apollo Server and Express with authentication, authorization, pagination, subscription, database access, tests.
          React's Render Props Pattern - Children as a Function (
          Aug 08, 2018
          The concept of children as a function or child as a function, also called render prop in general, is one of the advanced patterns in React.
          How to pass props to components in React (
          Jul 29, 2018
          In this guide, I want to explain React props in greater detail.
          JavaScript fundamentals before learning React (
          Jul 18, 2018
          The following walkthrough is my attempt giving you an almost extensive yet concise list about all the different JavaScript functionalities to complement your React application.
          How to fetch data in React (
          Jul 06, 2018
          The article gives you a walkthrough on how to fetch data in React.
          Why Apollo: Advantages, Disadvantages & Alternatives (
          Jul 04, 2018
          Overview about the advantages and disadvantages of using Apollo and its ecosystem for JavaScript applications. It mentions also Apollo alternatives such as Urql and Relay for React applications.
          Why GraphQL: Advantages, Disadvantages & Alternatives (
          Jul 03, 2018
          An overview about the advantages and disadvantages of using GraphQL instead of REST for JavaScript applications. It answers the question: 'What is GraphQL' and 'Why you should use GraphQL' for your next JavaScript application.
          How to use Redux with Apollo Client and GraphQL in React (
          Jun 26, 2018
          When having a GraphQL server, Apollo Client can be a valid option for your remote data. How fits Redux into the equation? This tutorial shows you an example on how Redux and Apollo Client can be used together in a React application. Whereas Redux is used for local data, Apollo Client is used for remote data.
          How to build a GraphQL client library for React (
          Jun 13, 2018
          A tutorial on how to build a GraphQL client library for React applications. It has three parts: the GraphQL client, connecting the GraphQL client to React, and offering Query and Mutation components for GraphQL operations.
          Getting Started with GitHub's GraphQL API (
          Jun 09, 2018
          I encourage GraphQL newcomers to start with the client-side by consuming a third-party GraphQL API before diving into the server-side of using GraphQL.
          A minimal Apollo Client in React Example (
          Jun 05, 2018
          The tutorial guides you through building a minimal Apollo Client in React example application where Apollo Client is used for remote data and React's local state for local data.
          Mocking a GraphQL Server for Apollo Client (
          May 28, 2018
          The tutorial shows you how to mock your GraphQL server for your GraphQL client for testing or other purposes. Either you can reconstruct a GraphQL client-side schema or introspect the GraphQL server schema. Both ways use client-side resolvers to mock the data.
          Visual Regression Testing and React Storybook (
          May 16, 2018
          This article is all about visual regression testing in React.
          A apollo-link-state Tutorial for Local State Management (
          May 04, 2018
          I want to show how to use apollo-link-state instead of introducing Redux or MobX in a React example application.
          A complete React with Apollo and GraphQL Tutorial (
          May 01, 2018
          In this tutorial, you will learn how to combine React with GraphQL in your application by using Apollo.
          A complete React with GraphQL Tutorial (
          Apr 09, 2018
          In this tutorial, you will learn how to combine React with GraphQL in your application.
          React's Context API explained: Provider and Consumer (
          Mar 31, 2018
          This article explains how to use React’s new context API for passing props down the component tree.
          React Testing Tutorial: Test Frameworks & Component Tests (
          Mar 19, 2018
          A React tutorial on how to setup and use React component tests with testing frameworks such as Mocha, Chai, Sinon, Enzyme and Jest.
          How to setup React.js on MacOS (
          Feb 20, 2018
          A concise step by step guide on how to setup React.js on MacOS. In a few steps, you will install Visual Studio Code, Node.js, NPM, Git, Prettier and create-react-app for building React applications with Mac OS.
          How to setup React.js on Windows (
          Feb 20, 2018
          A concise step by step guide on how to setup React.js on Windows for your PC. In a few steps, you will install Visual Studio Code, Node.js, NPM, Git, Prettier and create-react-app for building React applications with Windows.
          Getting started with React and Parcel (
          Feb 10, 2018
          The following article is a short guide on how to setup Parcel with React. Parcel is a bundler that got popular because of its zero-configuration setup for JavaScript applications.
          How to accept Paypal payments with React (
          Feb 04, 2018
          Ever wondered how to integrate Paypal in your React application? This tutorial guides you through the setup process from using a Paypal checkout form in your React application.
            How to learn React, Angular or Vue in 2018? (
            Jan 31, 2018
            How to learn React, Vue, Angular or any other framework? For many developers this question pops up every day. The article should give actionable guidance on how to escape the analysis paralysis and how to get from consuming to producing by following a simple learning framework.
            The minimal React + Webpack 4 + Babel Setup (
            Jan 18, 2018
            The article is more about teaching people how to setup their own project without a third-party boilerplate project.
            Tips to learn React + Redux in 2018 (
            Jan 09, 2018
            An extensive guide of tips, tricks and resources to learn React.js and Redux in 2018. The tutorial covers various topics in React, JavaScript ES6 and Redux to give you a great start in those topics.
            Programmatic Slack invite in JavaScript and React (
            Nov 05, 2017
            The article guides you through the setup of an automated Slack invitation for a JavaScript and/or React applications. Why would you want a Slack invitation in the first place?
              MobX (with Decorators) in create-react-app (
              Oct 10, 2017
              Everything you need to know about using MobX in a create-react-app with React. The article shows you all the different edge cases on how to activate JavaScript decorators, how to use MobX without decorators, and as bonus how to use MobX in Next.js.
              What's new in React 16? (
              Oct 05, 2017
              All React 16 changes in one article. It tells you about the new return types with fragments and strings, portals in React, componentDidCatch and error boundaries for a robust error handling in React, setState with returning null and custom DOM attributes in React.
              SVG Patterns in React - Build a Twitter Wall (
              Aug 30, 2017
              Wondering how you can use SVG in React? This article gives you a walkthrough of different SVG in React options. It showcases it with an implementation of using SVG as backgrounds in React with stylish patterns from svg-patterns or Hero Patterns.
              8 things to learn in React before using Redux (
              Jul 19, 2017
              Facts about React that should be known before using Redux (or MobX). Most important: Learn React first, then opt-in Redux but only if you need it. There are various techniques in React.js for scaling your local state management.
              How to use React's Provider Pattern with React's Context API (
              Jul 11, 2017
              React's Provider Pattern is deployed by using React's Context API. It helps you to pass props from a parent component to deeply nested components in the component hierarchy. After having read the article, you will know how to use it yourself and how Redux and MobX are using it as well.
              Redux and Redux Saga in Next.js (
              Jun 28, 2017
              A couple of basic setup steps to use Redux combined with Redux Saga in Next.js. Whereas Next.js enables you to build server-side rendered React applications, Redux and Redux Saga make sure to handle your state not only on the client-side, but also on the server-side.
              Accept Stripe Payments with React and Express (
              Jun 20, 2017
              Ever wondered how to integrate Stripe in your React application? This tutorial guides you through the whole setup process from using a Stripe checkout form on the client-side to setting up an Express payment server.
                Advanced List in React - Build a powerful Component (Part III) (
                Jun 13, 2017
                This part introduces an advanced list in React that will enable you to opt-in infinite scrolling and pagination.
                Infinite Scroll in React - Build a powerful Component (Part II) (
                Jun 07, 2017
                This part introduces infinite scroll in React in an elegant way by using higher order components. You will implement an infinite scrolling higher order component.
                Paginated List in React - Build a powerful Component (Part I) (
                May 29, 2017
                The first part of the series covers the paginated List component in React.
                Session Storage and Local Storage in React (
                Apr 27, 2017
                An article to showcase the usage of the session storage and local storage in React to persist your local state, to cache it for browser reloads and to make it expire.
                A gentle Introduction to React's Higher Order Components (
                Apr 04, 2017
                A comprehensive yet easy to understand introduction to higher-order components in React. Higher order components, known as HOCs, are often a difficult to understand pattern in React.js. The article gives you a gentle introduction, how to use HOCs in an elegant way, how to abstract reusable logic and how to use recompose.
                Redux or MobX: An attempt to dissolve the Confusion (
                Mar 28, 2017
                Using Redux or MobX in your React application? The article shows you all the differences between both state management libraries that can be used in React.
                When to use React's Ref on a DOM node in React (
                Mar 22, 2017
                What about the ref attribute in React.js? This article gives you clarification around the ref attribute to access DOM nodes in React. It shows you how you can use it, when you should use it and where it can be used and where it shouldn't be used.
                10 Reasons why I moved from Angular to React (
                Jan 31, 2017
                The article should help people to understand the benefits of React and Angular for making an educated decision to choose between Angular or React. It tells my story why I moved from Angular to React after using both libraries for years.
                MobX React: Refactor your application from Redux to MobX (
                Jul 18, 2016
                Refactor your React application from Redux to MobX. Use MobX instead of Redux for state management in React JS. Get to know actions, reactions and derivations in MobX and best practices.
                Flow: Type Checking with Flow in React + Redux (
                Jun 21, 2016
                The Flow: Type Checking with Flow in React + Redux tutorial will teach you how to use Flow in a React JS + Redux environment.

                Courses & Video Series

                The Road to React: The one with Hooks (
                Apr 21, 2020
                In this course you will take a deep dive into React fundamentals, covering all new React concepts including Hooks. I do address some legacy features in case you’re working with an older codebase, but the majority of this course will focus on working with modern React. You will learn how to style your app, techniques for maintaining your app, and some more advanced concepts like performance optimization.

                Books & Guides

                The Road to learn React (
                Feb 24, 2020
                The Road to learn React book teaches you the fundamentals of React. You will build a real world application along the way in plain React without complicated tooling.
                The Road to React with Firebase (
                Jan 28, 2019
                Your journey to master Firebase in ReactThe book walks you through building a full-blown application with advanced React and Firebase.
                Taming the State in React (
                Sep 26, 2017
                Learn about local state in React and state management with Redux and MobX from scratch.