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

The React Newsletter

Hi <<First Name>>,
 
7 Awesome React Hooks
Before the release of React Hooks, its functional components were a bit limited in usage. I mean, when it comes to working with State, context API, and some Lifecycle methods there was nothing we could do.

But, starting from React 16.8, we have a lot more flexibility to reuse an existing piece of code.

Today, you will learn about the usage of different React Hooks to solve everyday problems. So, let’s get ready and follow along with me on this interesting journey.

Read more
 
A deep dive into React Context API

It always begins with a single component. You could maybe define a class or functional component, but ultimately you must always be ready to render. You can have data in the form of local state(s), or functionality in form of, say, event handlers.

Your component will grow in responsibility and complexity. No component is a singleton, you learned, so you break your component down.

Now you have two components. Then three. Then four. Eventually you’ll have X number of components, each with its own complexity. The good stuff.

Components let you isolate parts of your large application so you can have a separation of concerns, and if anything breaks you can easily identify where things went wrong. Regardless, components are also meant to be reusable: you want to avoid duplicated logic, and you also want to keep watch for over-abstraction. Reusing components comes with the Don’t Repeat Yourself (Benefits), but it isn’t carved in stone as taught in Goodbye, clean code.

More often than not, components will have some data or functionality that another component needs. This could be to avoid duplication, or to keep the components in synchronization.

Whatever the reason, some components might need to communicate, and the way to do this in React is through props.


Read more
 
Technical SEO 101 for React Developers
In this session we will walk start with a typical React app and see what we can do to make it shine in search engines. We will discuss what technical SEO means and how it looks like for React apps. We will learn about Googlebot, web app architectures, testing tools and common challenges and their solutions.

Martin is pretty decent at humaning and pretty good at computering, so he decided to use his computering to improve his and other's humaning.

Watch video
 
Cypress Tutorial
Tired of having users email you that your web application is broken? Using Cypress.io, the JavaScript End to End Testing Framework, as a quality control tool will help a lot in preventing those emails. Yet Cypress.io, good as it is, is not a silver bullet.
 
In this upcoming video course Maurice de Beijer will teach you all about using Cypress.io. You will learn how easy it is to get started and create your first useful tests. You will also learn how to make tests for data driven applications more reliable and even faster. He will show you how to test applications using 3rd party authentications services. And you will learn how to include all that as part of your continuous integration build. Hellping you prevent errors from ever deploying.
 
Want to learn more? Go to https://www.cypress-tutorial.net/ and subscribe to hear about the updates and the course launch. Don’t worry, I am not going to spam you. And you can unsubscribe at any time.
How to use React memo

React's memo API can be used to optimize the rendering behavior of your . We will got through an example component to illustrate the problem first, and then solve it with React's memo API.

Keep in mind that most of the performance optimizations in React are premature. React is fast by default, so every performance optimization is opt-in in case something starts to feel slow.

Note: If your React component is still rendering with React memo, check out this guide about . Often a re-rendering is associated with a callback handler which changes for every render.

Note: Don't mistake React's memo API with . While React memo is used to wrap React components to prevent re-renderings, useMemo is used to memoize values.


Read more
 
How To Mock Fetch in Jest

Making HTTP requests in tests isn't a great idea in most situations... it can slow your tests down, is unreliable, and the API you are making requests to may not appreciate it either. So how do you avoid making HTTP requests in your tests? If you are using fetch, you're in the right place, if you are using Axios, head on over here.

We're going to be mocking fetch calls today in our Jest tests, starting with a manual mock, introducing a packing to make it easier and more flexible, and then seeing how we can test React components which rely on remote data.


Read more
 
Up to date answer about when to use React context or Redux (Redux Toolkit)

The React docs give some example use cases for context:

Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language.

The common property of these use cases is that data like the current theme doesn't change often and needs to be shared deep down the component tree, which would be cumbersome with "prop drilling". Something else that needs to be shared everywhere is the application state when using a "single source of truth" pattern, so it would follow that the context API would help with that as well, but there's a catch: components that use context will rerender every time that the provided value changes, so sharing the whole application state through context would cause excessive render lifecycles.

The answer to when to use and not to use context is clear and simple, but somehow it's still common to compare context to Redux, which manages state as a single source of truth. A quick survey of search results about this topic confirms that some resources just haven't come to grips with the limits of context, but that's to be expected, because the almost two years that the context API has been around isn't that long considering the rate of JavaScript churn that developers have to keep up with. A more interesting observation is that a common thread is a demand for a more lightweight alternative to Redux, and context with useReducer() superficially seems like it could fill that role. Enter Redux Toolkit.


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