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

The React Newsletter

Hi <<First Name>>,
 
Type-safe state modeling with TypeScript and React Hooks

The power of React Hooks allows us to manage reusable and composable state in our React components, without the need for class components or global state (such as Redux). Combining that with the flexibility of TypeScript interfaces, there are several different methods we can use to model our component state and context in a type-safe way.

In this post I will illustrate some of the benefits to using typescript strict mode with React Hooks and hope that you will consider using it for your TypeScript+React projects. Seemingly trivial things such as avoiding the Any type and ensuring you always define a return type will allow the type system to catch your mistakes before they can become runtime errors. This is especially helpful when debugging state management in React, where tracking down runtime errors can be particularly challenging.

Our goal will be to explore some examples of state management using React Hooks (specifically useState and useContext) while maintaining strict typing using TypeScript. In addition to providing type safety to our hooks and state data, types act as living documentation which provide clarity around how the application’s state is managed.


Read more
 
Advanced React (anti)patterns
Have you ever been “in the zone”, writing tons of code, the gears in your head turning like never before…and all of a sudden you realize you’re hungry? I’m sure you have. “Should I cook something? Nah, I don’t wanna lose focus. I’m gonna order something online and wait for it here…”.
Are you lazy? Well, maybe… but guess what? Your application is lazy too!
No, I won’t be talking about lazy evaluation. However, software likes to wait. In our case, await.

Read more
 
A11y And React, Why Is It Important? - Johnny Bell - React Rally 2019
Watch video
 
22 Miraculous Tools for React Developers in 2019

React, as we know it, is a JavaScript library to build amazing user interfaces. But not everybody is using the same tools or know all of the great ones out there that help make the react development experience funner and more proactive.

If you haven't used react yet or have friends that might be interested in using it, what do you say when they ask you why they should use the library? Besides telling them how great the library is (which should be the first thing), I also like to mention that the tools created by the open source community helps bring the experience to a whole new level of excitement.

Here are 22 tools you can use to build your react apps in 2019 (This list is not in order of their importance)


Read more
 
Redux with Code-Splitting and Type Checking

Redux has become the go-to state management system for React applications. While plenty of material exists about Redux best practices in Single Page Applications (SPAs), there isn’t a lot of material on putting together a store for a large, monolithic application.

What happens when you only need a few reducers on each page, but it could be any permutation of the total number of reducers you support? How do you code-split your store so you’re not serving unnecessary JavaScript on a single page? And while you’re working on code splitting, how do you get it to play nicely with TypeScript so that you can trust what’s going in and coming out of the store?


Read more
 
Forget about component lifecycles and start thinking in effects

React components have always relied on lifecycle methods for side effects. While lifecycle methods get the job done, they’re often overly verbose and have large margins for error.

It’s easy to forget to “clean up” a side effect when a component unmounts, or update the side effect when props change. As Dan Abramov preaches: Don’t stop the data flow.

React recently introduced a new way to deal with side effects: the useEffect hook. Translating lifecycle methods to useEffect calls can be confusing at first. It’s confusing because we shouldn’t be translating imperative lifecycle methods to declarative useEffect calls in the first place.


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