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

The React Newsletter

Hi <<First Name>>,
 
Don't Sync State. Derive It!
In my Learn React Hooks workshop material, we have an exercise where we build a tic-tac-toe game using React's useState hook (based on the official React tutorial).
 

We have a few variables of state. There's a squares state variable via React.useState. There's also nextValuewinner, and status are each determined by calling the functions calculateNextValuecalculateWinner, and calculateStatussquares is regular component state, but nextValuewinner, and status are what are called "derived state." That means that their value can be derived (or calculated) based on other values rather than managed on their own.

There's a good reason that I wrote it the way I did. Let's find out the benefits of derived state over state synchronization by reimplementing this with a more naive approach. The fact is that all four variables are technically state so you may automatically think that you need to use useState or useReducer for them.



Read more
 
Preact X - Virtuous DOM and the Fragments of Suspense

It's finally happening! After months of hard work we've crossed the finish line and are over the moon with excitement to finally mark Preact X as stable. We'd like to thank everybody who tested it and submitted bug reports.

We originally planned to release a sort-of migration release as version 9 with just the breaking changes from X, but that got canned because many users reported that the upgrade process was easy enough and didn't warrant a long migration period in-between. In fact we got many reports that the upgrade could be done in under an hour, despite some of the breaking changes in X, making the need for a migration release even less desirable.

What's new?

Preact X ships with several major features and we combined them all in a single document on our site. If you're upgrading an existing Preact 8.x project, we got you covered with a detailed upgrade guide.

To give a quick summary of the new features:

  • Fragments
  • componentDidCatch
  • preact/hooks addon
  • preact/test-utils addon
  • createContext API
  • compat moved to core
  • Plethora of compatibility fixes
  • Many new warnings in preact/debug
  • Same 3 kB size as Preact 8

Again, we highly recommend checking out our new site and specifically the what's new section.


Read more
 
Refactoring React
React on it’s own has a very small API surface. Most of the magic happens in user-land. But, there's a lot out there: Higher order components, Render props, Compound components? Provider methods? Learn which component pattern will make your codebase better in which use

Watch video
 
How Does Redux Work?

I was recently given a scenario during an interview regarding how Redux would work with a basic To Do application. I needed to walk the interviewer through what happens the moment an input field is filled and the submit button is clicked. What made this a little more difficult was that I didn’t have a computer in front of me. In fact, all I had was a pen — which he offered to me — and the back of my resume to write on.

With the pen in my hand, I sat there for a few seconds and thought about it.

I had been here before — the deer in the headlights of the technical portion of an interview. Fortunately, I had already gotten over the hump of bombing my first few technical interviews so it wasn’t so bad.

The reality is that interviewing is a skill, and the only way to get better at them is to fail so that way you could recognize your weaknesses going forward. Which is why I like to write about what I’m asked on interviews. It forces me to go into deep dives and get better. Which is what I recommend anyone to do.

Always keep learning.


Read more
 
React Microfrontends and Monorepos: A Perfect Match

n this article, we will use a monorepo when implementing a microfrontend architecture. We will explore how this approach mitigates problems typically associated with microfrontends.

What is a Microfrontend?

This article assumes knowledge of microfrontends, so this section will be brief.

For this article, we will define a microfrontend as one of multiple parts of a complex application which fulfill the following criteria:

  • Is composed with other microfrontends to make up a user experience
  • Is dedicated to a unique concern of the user experience
  • Can be built and deployed in isolation

Read more
 
http://bit.ly/32Ye9CVhttp://bit.ly/32Ye9CV

Redux is one of those technologies that I consider a “personal Everest”. Everytime I look at it, I feel like there’s no end to the boilerplate and patterns to memorize.

At my first job and the first codebase I worked on, we had to use NGRX (Angular’s version of Redux). It was incredibly challenging; I spent hours reading docs and watching tutorials trying to understand NGRX. I even tried learning Redux in a desperate attempt to understand NGRX. I constantly complained to my boss about all the boilerplate, files, and patterns to memorize.

He told me, “If you were to use your own solution instead, you’d probably end up repeating those same patterns anyway”.

I finally concede. After managing React state with everything except Redux, I’ve found myself appreciating why it works the way it does and requires so much boilerplate. After learning React’s Context API, useReducer and a lot more about managing state, I finally appreciate Redux.

It’s not easy getting from A to B though. There’s a lot of ground to cover between learning useState and useReducer, and even more when you get into Redux and managing complicated states.


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


unsubscribe from this list    update subscription preferences 

Email Marketing Powered by Mailchimp