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

The React Newsletter

Hi <<First Name>>,
 
How to optimize your context value

Why and how you can optimize your context provider's value to avoid performance issues

NOTE: I want to add that the times it's important to optimize your context value is when a certain combination of the following conditions are met:

  1. Your context value changes frequently
  2. Your context has many consumers
  3. You are bothering to use React.memo (because things are legit slow)
  4. You've actually measured things and you know it's slow and needs to be optimized

If that explains your situation, then read on (and don't miss the alternative solution which is honestly probably better anyway).

No seriously, if you're going to do this stuff just because you think your code might be slow, then don't bother. I'm not joking. React is really fast and adding complexity in the name of performance when performance is good enough is just wasteful of your "complexity budget"

When I explained how I create and use context for my React applications, I touched briefly on the importance of using React's useMemo hook.


Read more
 
5 Ways to animate a React app in 2019

Animation in ReactJs app is a popular topic and there are many ways to create different types of animations.Many developers create animation exclusively using css and adding classes to HTML tags. This is a great way and you should use it. If you want to create complex animations you can pay attention to GreenSock. GreenSock is the most powerful animation platform. There are also a lot of libraries, components for creating animation in React. 
Let’s talk about them 😎

  1. CSS method
  2. React-transition-group — It is an add-on component for a simple implementation of basic CSS animations and transitions.
  3. react-animations — React-animations implements all animations from animate.css. Simple to use!
  4. React Reveal — This is an animation framework for React.
  5. TweenOne — library that ant.design uses for animation
…………………….…👇
To view the repo, click here. 👈
 ………………………👆

Of course the open source has much more animation libraries and components. I would like to explore it. But this article will not contain the libraries. You will also receive a bonus at the end of the article in the form of libraries which deserve your attention.


Read more
 
The Evolution of React and GraphQL at Facebook and Beyond


Watch video
 
How to identify and resolve wasted renders in React

So, recently I was thinking about performance profiling of a react app that I was working on, and suddenly thought to set a few performance metrics. And I did come across that the first thing I need to tackle is wasted renders I’m doing in each of the webpages. You might be thinking about what are wasted renders by the way? Let’s dive down in.

From the beginning, React has changed the whole philosophy of building web apps and subsequently the way front-end developers think. With its introduction of Virtual DOM, React makes UI updates as efficient as they can ever be. This makes the web app experience neat. Have you ever wondered how to make your React applications faster? Why do moderately sized React web apps still tend to perform poorly? The problems lie in how we are actually using React!


Read more
 
Essential React Hooks Design Patterns
Today we explore the common design patterns of the recently introduced React Hooks API. We are going to cover all the basics you need to create the real application, starting from the state management to the handling of asynchronous I/O. It’s best to do in the context of some real-world example, and we will take the “pick user” form control with server-side filtering as such an example. During the exercise, we will identify design problems, explore all the main parts of React Hooks API, and understand how it’s going to reduce an amount of code we write daily to pay our bills.

Read more
 
How to Use React Refs

React Refs are a useful feature that act as a means to reference a DOM element or a class component from within a parent component. This then give us a means to read and modify that element.

Perhaps the best way to describe a ref is as a bridge; a bridge that allows a component to access or modify an element a ref is attached to. Using refs give us a way to access elements while bypassing state updates and re-renders; this can be useful in some use cases, but should not be used as an alternative to props and state (as the official React docs point out). Nevertheless, refs work well in certain scenarios that we will visit in this article.

Refs also provide some flexibility for referencing elements within a child component from a parent component, in the form of ref forwarding — we will also explore how to do this here, including how to inject refs from HOCs into their wrapped components.


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