text: The React Newsletter #175
  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.
  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.
  useContext() + useReducer() = Magic?
  The React Context API can replace Redux - with React Hooks, it gets even more fun to use.
  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.
  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
  Pro Gatsby 2
  Building your first 🔥 React 🔥 application in 75 minutes or so. On @skillshare now. Use http://skl.sh/2FW5SnT to get 2 months free premium content.