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

The React Newsletter

Hi <<First Name>>,
 
A Complete Guide to useEffect

You wrote a few components with Hooks. Maybe even a small app. You’re mostly satisfied. You’re comfortable with the API and picked up a few tricks along the way. You even made some custom Hooks to extract repetitive logic (300 lines gone!) and showed it off to your colleagues. “Great job”, they said.

But sometimes when you useEffect, the pieces don’t quite fit together. You have a nagging feeling that you’re missing something. It seems similar to class lifecycles… but is it really? You find yourself asking questions like:

  • 🤔 How do I replicate componentDidMount with useEffect?
  • 🤔 How do I correctly fetch data inside useEffect? What is []?
  • 🤔 Do I need to specify functions as effect dependencies or not?
  • 🤔 Why do I sometimes get an infinite refetching loop?
  • 🤔 Why do I sometimes get an old state or prop value inside my effect?

When I just started using Hooks, I was confused by all of those questions too. Even when writing the initial docs, I didn’t have a firm grasp on some of the subtleties. I’ve since had a few “aha” moments that I want to share with you. This deep dive will make the answers to these questions look obvious to you.

To see the answers, we need to take a step back. The goal of this article isn’t to give you a list of bullet point recipes. It’s to help you truly “grok” useEffect. There won’t be much to learn. In fact, we’ll spend most of our time unlearning.

It’s only after I stopped looking at the useEffect Hook through the prism of the familiar class lifecycle methods that everything came together for me.


Read more
 
Higher Order Components in a React Hooks World

For most people working with regularly with React, it’s hard to go very far without encountering higher-order components (or HoC’s). To the uninitiated, it is a pattern that leverages React’s compositional nature to allow for code reuse across different components. Even if you haven’t written any yourself, chances are likely that you too are using them in some capacity without even realizing it.

Common usage patterns can range wildly from connecting to a project scoped state management store (ex: connect for redux), to conditional rendering components or my favorite use case of giving functional components local state.


Read more
 
useContext() + useReducer() = Magic?
The React Context API can replace Redux - with React Hooks, it gets even more fun to use.

Watch video
 
Write your first React Hook!

One of the most loved features in React, which helps us a lot while building our application, is the way we can use and manage state.

In October 2018, at the React Conf, the React team released a proposal for React 16.8. They introduced React Hooks - a new way to use and manage state throughout our application and perform side-effects in React functional components.

This was a huge surprise and nobody expected that proposal, which was enough to get community super excited. A lot of people have been waiting for this for such a long time and are already using it in production, even though it's been in alpha version which is not recommended by the React team. The feature has just been released today along with the latest version of React (v16.8), which is one the most awaited releases for sure.

This means that React Hooks are finally 100% safe to use!🎣

In this article, we're going to review how we were managing state in React, understand why React Hooks are really a game-changer and learn to write our very first React Hook.


Read more
 
Testing your React apps like a boss with Jest

In this article, we will cover the testing framework Jest. We will learn how to:

  • write tests, it’s a breeze to write tests and assert on specific conditions
  • manage our test suite, by running specific tests as well as specific test files by utilizing the pattern matching functionality
  • debug our tests, by augmenting VS Code we can gain the ability to set breakpoints in our tests and create a really nice debugging experience
  • snapshot mastery, learn how using snapshots can give you increased confidence that your components are still working after a change you made
  • leverage mocking, mocking dependencies can ensure you only test what you want to test and Jest has great defaults when it comes to mocking
  • coverage reports, we have come to expect a good coverage tool to be included in all good testing libraries. Jest is no different and it’s really easy to run coverage reports and quickly find what parts of your code that could benefit from some more testing

Read more
 
Generate Javascript static types from GraphQL: TypeScript and Flow
Javascript is usually considered as a untyped or weakly-typed language. I will not go into the discussion about this topic in this article. You can check out for example this stackoverflow thread for more information. We currently cannot prove the correlation between using statically/dynamically typed languages and number of defects in the system, but there are some evidences that errors occur less when using statically typed language. You can go more deeply into the topic in the following study. In addition statically typed languages can offer smart tooling integrated in your IDE, which enables you to perform more complex autocompletion and linting. Javascript is one of the most widely spread and demanding language. You can use it for frontend, backend or even mobile development. Javascript has definitely a lot of advantages, but as it is untyped it does not support static typings by default. Fortunately, we can enhance the Javascript language using the following tools to add static typings to our project:Flow is open-sourced by Facebook and we are able to perform type checking with a Flow server while coding. On the other hand, TypeScript is maintained by MicrosoftTypeScript is older then Flow and even though Flow is evolving quite quickly, TypeScript still has better support with typings for more libraries, especially on the backend. In this article we will use TypeScript in our examples, as some libraries currently support only TypeScript generation.

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