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

The React Newsletter

Hi <<First Name>>,
 
How Are Function Components Different from Classes?

How do React function components differ from React classes?

For a while, the canonical answer has been that classes provide access to more features (like state). With Hooks, that’s not true anymore.

Maybe you’ve heard one of them is better for performance. Which one? Many of such benchmarks are flawed so I’d be careful drawing conclusions from them. Performance primarily depends on what the code is doing rather than whether you chose a function or a class. In our observation, the performance differences are negligible, though optimization strategies are a bit different.

In either case we don’t recommend rewriting your existing components unless you have other reasons and don’t mind being an early adopter. Hooks are still new (like React was in 2014), and some “best practices” haven’t yet found their way into the tutorials.

So where does that leave us? Are there any fundamental differences between React functions and classes at all? Of course, there are — in the mental model. In this post, I will look at the biggest difference between them. It existed ever since function components were introduced in 2015 but it’s often overlooked:

Function components capture the rendered values.

Let’s unpack what this means.


Read more
 
Rethinking the component model with Hooks

If you’re a fan of React, you might have already heard that the release with Hooks (v16.8) is here.

Thanks to Dan Abramov for reviewing this post and suggesting improvements.

I’ve been playing with the alpha version for a few weeks now and I really like it. The adoption hasn’t been all rainbows and unicorns though.

Learning useState and useReducer was pretty straightforward and has improved how I handle state.


Read more
 
Painless Testing for React Applications with Cypress
Gleb Bahmutov talks about how you can use Cypress.io, a free open-source testing tool, to write end-to-end tests for your React apps.

Watch video
 
Accessibility is not a “React Problem”

Every few months, it seems like there’s a revival of the Twitter War™ about JavaScript libraries and accessibility. React is a common target, with developers naming a litany of issues:

  • infinite wrapper <div>s
  • inline styles overriding custom user stylesheets
  • no focus management when navigating between routes
  • and on and on…

While these are valid concerns, it should be noted that nothing in React prevents us from building accessible web apps.

At Netlify, we believe accessibility on the modern web is important. We also spend a lot of time in React; it actually powers the frontend of our app. As such, we’ve collected some tips from our frontend engineers on how to leverage accessibility best practices in React.


Read more
 
How I structure my React Apps

This is a guide I started for my team at work and wanted to share it. This does not take into account Hooks or Suspense API as this a very general example of a project structure. I typically begin every project this way and then branch out.

I would love some feedback from the community. Also, it would be awesome to hear about any mistakes I’m making and/or any methods I can use to optimize my code and make it cleaner.

I’ve been picking up on typescript as well, so hopefully, that can be my next story :)


Read more
 
Forms with Formik TypeScript

One of the most painful topics for React developers always was how to build nice forms and have a nice clean code. Some people might think that it’s not necessary to use a third-party library, but in some cases, that’s needed especially when we need more complex forms. First, we started with Redux Form, a lot of people used it for a long time but then we started to ask ourselves if it’s a good idea and the best way to manage our form state using our Redux store. We don’t need to have our form state in our Redux store, it’s such a not good practice at all.

Then, Formik really came to change it for us and let our forms so easy to build and our code so readable and well-written that now we don’t have to worry too much about it. We know that Formik code is written in TypeScript but a lot of people still don’t know how to use it the right way.

So, in this article, we’re going to learn about how to use Formik with TypeScript, since a lot of developers has been started to use it lately, let’s jump into this hype and see how we can improve more our forms.


Read more
 
React video courses
Copyright © 2019 ABL - The Problem Solver, All rights reserved.


unsubscribe from this list    update subscription preferences 

Email Marketing Powered by Mailchimp