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

The React Newsletter

Hi <<First Name>>,
React - Server Components - Introduction and Initial Thoughts

Just before Christmas, the React team gave an early Christmas present, Server Components a.k.a the zero bundle size components. Let's have a look at what they are, what they bring to the table and my thoughts.

Before we start, just want to let you know that the best resource for a deeper understanding would obviously be the RFC and the introduction video from the React team. I put this together for people who are light on time and to share my thoughts and understanding.

You can find the entire source for this post here. It's a fork of the actual demo repo from the React team. I just simplified the components for easier understanding. All kudos go to the React team.

With the introduction of the Server Components, the existing components have been renamed as Client components. In fact, we have three types now:

  • Server Components
  • Client Components
  • Shared Components

Read more
How React Updates State

React useState() hook manages the state in functional React components. In class components this.state holds the state, and you invoke the special method this.setState() to update the state.

Mostly using state in React is straightforward. However, there’s an important nuance to be aware of when updating the state.

When you update the component’s state, does React update the state immediately (synchronously) or rather schedules a state update (asynchronously)? This post answers this question.

Read more
Build React website responsive | Beginner React JS From scratch with smooth scroll
Build a Full Responsive React website from scratch for beginners, we will go through step by step into building a smooth scrolling website with multiple sections and great design. We also going to work with react-carousel for building the customers' review section.

Watch video
Memoization and React

Memoization has to do with caching. Here's a super simple implementation of memoization:

const cache = {}
function addTwo(input) {
  if (!cache.hasOwnProperty(input)) {
    cache[input] = input + 2
  return cache[input]

The basic idea is: hang on to the input and their associated output and return that output again if called with the same input.

The point is to avoid re-calculating a value for which you already have the result cached. In our case, we're avoiding "input + 2" 🙃

Read more
What Vue.js Does Better Than React

I've been a React engineer for the past 5 years. I love React. I love making React applications. I think it's one of the best UI frameworks available right now.

However, there are a few competitors in this space. One of the biggest is Vue.js.

I've played around with Vue.js a little bit in the past but I figured it was way past due to do a deep dive into how Vue.js works, and how it makes my life as a UI engineer easy.

After delving deep into the Vue.js docs and playing around with Vue.js (note: I am in no way a Vue.js expert) I was shocked to find myself liking the way Vue.js did some things better than React.

Ultimately I hope that React steals is inspired by these things that Vue.js does and starts doing them as well.

Read more
BBC World Service & Web Performance
How the BBC World Service migrated 31 million weekly readers to an isomorphic react app and improved page performance by up to 83%.

The BBC World Service publishes news stories in over 40 languages globally. Stories are written by journalists around the world in their native language instead of using translations. World Service covers everything from local to global news and content is delivered in multiple formats, including text, video and audio.

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