React

Anatomy of a React application: optimistic updates #article - "Web applications often require interaction with APIs in order to retrieve and update data. Server-side rendering can greatly reduce the time required to fetch data on the initial page load. Once the application is loaded on the browser though, additional API calls will involve further network calls which could potentially be slow and flaky, making your application sluggish. This is especially true when on mobile connections."

Expo - "With Expo tools, services, and React, you can build, deploy, and quickly iterate on native Android, iOS, and web apps from the same JavaScript codebase."

Formik - "Build forms in React, without the tears. Formik is the world's most popular open source form library for React and React Native."

Immer - "Immer (German for: always) is a tiny package that allows you to work with immutable state in a more convenient way. It is based on the copy-on-write mechanism." Great video intro.

Next.js - "The React Framework"

oayres / react-ssr - "Seamless server-side rendering of React apps"

Preact - "Fast 3kB alternative to React with the same modern API."

React Async - "React Async is a utility belt for declarative promise resolution and data fetching. It makes it easy to handle asynchronous UI states, without assumptions about the shape of your data or the type of request. React Async consists of a React component and several hooks. You can use it with fetch, Axios or other data fetching libraries, even GraphQL."

React Next #conference

Understanding the React useReducer Hook #article - "If you are at all familiar with reducers, you should have a good understanding of what React’s useReducer hook does. Plain and simple, it allows functional components in React access to reducer functions from your state management. If you are not familiar with reducers, read this Reducers Introduction first."

Global State

Context #article - "Context provides a way to pass data through the component tree without having to pass props down manually at every level."

React Context vs Redux - Who wins? #video - "Is the React Conext API a good replacement for Redux? And how would you switch? Here's an example project and some reasons on why (not to) switch!"

Hooks

A Complete Guide to useEffect #article - "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."

Deep dive: How do React hooks really work? #article - "Hooks are a fundamentally simpler way to encapsulate stateful behavior and side effects in user interfaces. They were first introduced in React and have been broadly embraced by other frameworks like Vue, Svelte, and even adapted for general functional JS. However, their functional design requires a good understanding of closures in JavaScript."

Getting Closure on Hooks (JSConf Edition) #video - "The design of React Hooks requires a good understanding of closures in JavaScript. In this talk, we’ll reintroduce closures by building a tiny clone of React! This will serve two purposes – to demonstrate the effective use of closures, and to show how you can build a Hooks clone in just 29 lines of readable JS. Finally, we arrive at how you get Custom Hooks and the Rules of Hooks out of this incredible mental model!"

How to fetch data with React Hooks? #article - "In this tutorial, I want to show you how to fetch data in React with Hooks by using the state and effect hooks. We will use the widely known Hacker News API to fetch popular articles from the tech world. You will also implement your custom hook for the data fetching that can be reused anywhere in your application or published on npm as standalone node package."

Introducing Hooks #article - "Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class."

react-hooks-testing-library - "Simple and complete React hooks testing utilities that encourage good testing practices."

Run useEffect Only Once #article - "The trick is that useEffect takes a second parameter."

React Query

All About React Query (with Tanner Linsley) — Learn With Jason #video - "There‘s a lot of buzz about React Query and how much it can simplify your development workflow. In this episode, we’ll learn all about it from the #TanStack creator himself!"

React Query - "Performant and powerful data synchronization for React. Fetch, cache and update data in your React and React Native applications all without touching any "global state"."

React Query - Essentials #course - $150. "The official and exclusive guide to mastering server-state in your applications, straight from the original creator and maintainer of the library."

React Query: Guides & Concepts: Optimistic Updates #article - "When you optimistically update your state before performing a mutation, there is a non-zero chance that the mutation will fail. In most cases, you can just trigger a refetch for your optimistic queries to revert them to their true server state. In some circumstances though, refetching may not work correctly and the mutation error could represent some type of server issue that won't make it possible to refetch. In this event, you can instead choose to rollback your update."

SWR

Mutate the data without key at first #403 - "Hey, I have hard time figuring out how to deal with usage of SWR and revalidation when key for request is not there from the beginning."

SWR - "React Hooks library for data fetching"

Testing Library

Cheatsheet #article - "A short guide to all the exported functions in React Testing Library"

Common mistakes with React Testing Library #article - "Some mistakes I frequently see people making with React Testing Library."

eslint-plugin-jest-dom - "ESLint plugin to follow best practices and anticipate common mistakes when writing tests with jest-dom."

eslint-plugin-testing-library - "ESLint plugin to follow best practices and anticipate common mistakes when writing tests with Testing Library"

How To Do the Basics in React Testing Library #article - "A few months ago I was hired to be the tester of a React website. The problem? I had little experience with React, and to follow the test documentation from React, from Enzyme and React Testing Library was quite complicated. So after I understood all of this, I decided to make this tutorial."

React Testing Library - "React Testing Library builds on top of DOM Testing Library by adding APIs for working with React components."

Which query should I use? #article - "Based on the Guiding Principles, your test should resemble how users interact with your code (component, page, etc.) as much as possible."