Copy
Stay up to date with the latest news on React.
View this email in your browser

The React Newsletter

Hi <<First Name>>,
 
Why React Context is Not a "State Management" Tool (and Why It Doesn't Replace Redux)

"Context vs Redux" has been one of the most widely debated topics within the React community ever since the current React Context API was released. Sadly, most of this "debate" stems from confusion over the purpose and use cases for these two tools. I've answered various questions about Context and Redux hundreds of times across the internet (including my posts Redux - Not Dead Yet!React, Redux, and Context BehaviorA (Mostly) Complete Guide to React Rendering Behavior, and When (and when not) to Reach for Redux), yet the confusion continues to get worse.

Given the prevalence of questions on this topic, I'm putting together this post as a definitive answer to those questions. I'll try to clarify what Context and Redux actually are, how they're meant to be used, how they're different, and when you should use them.
 

TL;DR

Are Context and Redux the same thing?

No. They are different tools that do different things, and you use them for different purposes.

Is Context a "state management" tool?

No. Context is a form of Dependency Injection. It is a transport mechanism - it doesn't "manage" anything. Any "state management" is done by you and your own code, typically via useState/useReducer.

Are Context and useReducer a replacement for Redux?

No. They have some similarities and overlap, but there are major differences in their capabilities.

When should I use Context?

Any time you have some value that you want to make accessible to a portion of your React component tree, without passing that value down as props through each level of components.

When should I use Context and useReducer?

When you have moderately complex React component state management needs within a specific section of your application.

When should I use Redux instead?

Redux is most useful in cases when:

  • You have larger amounts of application state that are needed in many places in the app
  • The app state is updated frequently over time
  • The logic to update that state may be complex
  • The app has a medium or large-sized codebase, and might be worked on by many people
  • You want to be able to understand when, why, and how the state in your application has updated, and visualize the changes to your state over time
  • You need more powerful capabilities for managing side effects, persistence, and data serialization

Read more
 
Intro to React Server Side Rendering

This is the first in (hopefully) a series of articles to document the lessons I learned building and maintaining SSR apps.

This article does not cover the pros/cons of SSR, or the pros/cons of not using tooling or frameworks (e.g., Create React App, Next.js, etc).

I fully acknowledge that manually setting up build configs is painful. There is plenty of great tooling out there to abstract away these configs, so you probably don’t even need to touch any of this stuff to build awesome apps.

But for those ready to embrace the pain…


Read more
 
Cypress Tutorial
Tired of having users email you that your web application is broken? Using Cypress.io, the JavaScript End to End Testing Framework, as a quality control tool will help a lot in preventing those emails. Yet Cypress.io, good as it is, is not a silver bullet.
 
In this upcoming video course Maurice de Beijer will teach you all about using Cypress.io. You will learn how easy it is to get started and create your first useful tests. You will also learn how to make tests for data driven applications more reliable and even faster. He will show you how to test applications using 3rd party authentications services. And you will learn how to include all that as part of your continuous integration build. Hellping you prevent errors from ever deploying.
 
Want to learn more? Go to https://www.cypress-tutorial.net/ and subscribe to hear about the updates and the course launch. Don’t worry, I am not going to spam you. And you can unsubscribe at any time.
Introduction to React #15 | NextJS
Where we port our application that was built on Create React App to the NextJS framework.

Watch video
 
How To Implement Micro-Frontend Architecture With React

Modern web applications are becoming big and more complex and sometimes managed by different teams. Your application might have features developed by different teams and you want to release only certain features into production before delivering the entire application. How do you manage different teams, different release timelines if you have one repo?

Most of these complex apps live on the client-side which makes it harder to maintain. There are some other issues as well with this monolithic big fat application. In this post, I am going to discuss the advantages, disadvantages, implementation, and a lot of other stuff.


Read more
 
React is slow, what now?

TLDR: the gist

  • Measure performance! If you don’t measure it’s the same as doing nothing.
  • You can optimize your React performance by improving what (🤔) and which (🧙) components render.
  • 🧙 To improve which component renders you can use

    • React.memo
    • useCallback
    • useMemo
    • Make sure your props have stable references
    • Virtualization
  • 🤔 To improve what components render you should

    • identify the slow components
    • simplify, use more efficient abstractions, make smaller trees, etc

Read more
 
Useful Custom Hooks for Tired React Devs

Writing React applications can get same-y. We often find ourselves going over the same patterns of defining the same component behavior over and over, and one can start to wonder how we can make these patterns more and more DRY.

React Hooks are awesome. By abusing the power of JavaScript closures and with a few caveats, it’s possible to hold state in a function. How cool is that?

(Before I get shouted down by C developers who’ll tell me a static variable in a function is effectively stateful, I know.)

Hooks do not only permit stateful behaviour, but they’re also reactive. You can use hooks to react to changes in the props of a component, store state, store references to mutable values, etc. And that’s just using the hooks shipped by default. Hooks are composable too. This means I can write my own hook, that uses other hooks. By combining these, One can effectively inject state, behavior or reactivity into any functional component.

In this article I’m going to go over a few examples of these, both for React and React Native devs, that demonstrate this composability and create some neat and super handy, easily testable bits of functionality that you can use in any project.


Read more
 
React video courses
Because I need to pay my bills 😉
 
Copyright © 2021 ABL - The Problem Solver, All rights reserved.


unsubscribe from this list    update subscription preferences 

Email Marketing Powered by Mailchimp