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 Not Have A Mess with React Hooks & Redux

Ever since hooks was released, there were few good articles explaining on how Hooks differ from Redux, how Hooks may replace Redux and how Hooks work with Redux.
Finally, I have found Hooks to be a complementry feature for working with Redux - the latest version of redux added hooks for selecting slices from reducers (selectors), adding dispatch to a component and few others.

With Custom Hooks, we can make the store implementation agnostic, and expose a simple api for reading and update the state.


Read more
 
React with TypeScript: Best Practice
React and TypeScript are two awesome technologies used by a lot of developers these days. Knowing how to do things can get tricky, and sometimes it’s hard to find the right answer. Not to worry. We’ve put together the best practices along with examples to clarify any doubts you may have.

Read more
 
Timeline Component in React (and some CSS Magic 🎩)
Watch video
 
How to (unit) test in React
This guide explains what unit testing is, why it’s needed and the best practices for small to large React applications.

Read more
 
React: Efficiently Rendering Lists

React JS, which was created by Facebook, is today's most popular JavaScript Library for building User Interfaces. We can use React to build sleek, fast Single Page Applications or websites. In the article I'm going to talk about the keys to efficiently rendering lists in React, and show how rendering list's correctly is the main thing that helps React maintain super fast performance.

Updating the DOM is usually one of the main bottlenecks when it comes to web performance, especially when using a bunch of CSS effects and animations. If you have large amounts of data that need to be rendered to the page, performance can take a pretty big hit trying to keep up with everything that needs to be rendered. Normally when something on a page get's edited, the entire page will update, rendering things that haven't even moved or been changed. One of React's main focuses was aimed to fix this problem, and it all starts with the React Virtual DOM; a DOM kept in memory. React essentially renders everything to its virtual DOM, compares that to the real DOM, and then updates the real DOM by only rendering the things that have changed.


Read more
 
Optimize your app by being Lazy

What is lazy loading, and why should you do it?

Or, to put it more accusingly: Why are you making your users wait for your entire app to be loaded, when they are only going to use a tiny portion of it?

Fact #1: Aspects of a website cater to different needs in different situations. One single user probably does not need your entire site to be loaded at once.

Fact #2: Smaller JavaScript bundles load quicker than large ones.

Conclusion: We should not load more JavaScript than needed at a given time.

Lazy loading is a technique to help you achieve that in your website. Cool, huh? So how do we do this?


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


unsubscribe from this list    update subscription preferences 

Email Marketing Powered by Mailchimp