Nathan's Brain
  • Introduction
  • Incubator
  • American Sign Language
  • Art
  • Behavior Change
    • Akrasia
      • Beeminder
      • Procrastination
  • Career
  • Civil Discourse
  • Communication
  • Computer Science
    • Artificial Intelligence
  • Creativity
    • Writing
  • Design
    • Color
    • Design Process
    • Stock
    • Web Design
  • Economics
  • Engineering
  • Entrepreneurship
    • Customer Development
    • Marketing
      • Newsletter Publishing
    • Pricing
  • Environment
    • Energy
    • Transportation
  • Failure & Vulnerability
  • Freelancing
    • Estimating
  • Futurism
  • Governance & Politics
    • Representation & Voting
  • Health
  • Humane Tech
    • Phone Usage
  • Infotainment
  • Linguistics
  • Minimalism
  • Personal Finance
    • FIRE Movement
    • Investing
  • Productivity
    • Attention Management
    • Audio for Focus
    • Automation
    • Task Management
    • Time Management
  • Programming Languages
    • JavaScript
      • Snippets
    • PHP
    • Python
      • Development Environments
      • Package Management & Distribution
  • Psychology
  • Quantified Self
    • Experience Sampling Method
  • Rationality
    • Bayes' Theorem
    • Cognitive Biases
  • Religion
    • Adventism
  • Remote Work
  • Research
    • Note Taking
  • Science
  • Self-Study
    • Accessibility & Usability
    • Algorithms
    • Artificial Intelligence
    • Cryptography
    • Data Science
    • Design Patterns
    • Freelancing
    • Functional Programming
    • Game Development
    • Graphic Design
    • Grid Layout
    • Microservices
    • PWAs
    • SaaS
    • Software Craft
    • Software Management
    • Statistics
    • SVG
    • UI Design
    • Web Animation
  • Software Development
    • API Design
    • Collaboration
    • Command Line
    • git
    • Integrated Development Environments
    • Knoxville Scene
    • Paradigms
    • Refactoring
    • Self-Care
    • Testing
  • Technology History
    • People
    • Timeline
  • Web Development
    • Accessibility & Usability
    • APIs
    • Browsers
    • Content Management Systems
    • CSS
    • Email
    • Frameworks
      • React
    • Libraries
    • No Code & Low Code
    • Performance
    • Serverless
    • Static Sites
    • Testing
    • Twig
    • Type
Powered by GitBook
On this page
  • Global State
  • Hooks
  • React Query
  • SWR
  • Testing Library
  1. Web Development
  2. Frameworks

React

PreviousFrameworksNextLibraries

Last updated 4 years ago

#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."

- "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."

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

- "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 mechanism." .

- "The React Framework"

- "Seamless server-side rendering of React apps"

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

- "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."

#conference

#article - "If you are at all , 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 first."

Global State

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

#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

#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."

React Query

SWR

Testing Library

#article - " are a fundamentally simpler way to encapsulate stateful behavior and side effects in user interfaces. They were and have been broadly embraced by other frameworks like , , and even adapted for . However, their functional design requires a good understanding of closures in JavaScript."

#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!"

#article - "In this tutorial, I want to show you how to fetch data in React with Hooks by using the and hooks. We will use the widely known 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."

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

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

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

#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 creator himself!"

- "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"."

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

#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."

- "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."

- "React Hooks library for data fetching"

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

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

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

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

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

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

#article - "Based on , your test should resemble how users interact with your code (component, page, etc.) as much as possible."

Anatomy of a React application: optimistic updates
Expo
Formik
Immer
copy-on-write
Great video intro
Next.js
oayres / react-ssr
Preact
React Async
React Next
Understanding the React useReducer Hook
familiar with reducers
Reducers Introduction
Context
React Context vs Redux - Who wins?
A Complete Guide to useEffect
Deep dive: How do React hooks really work?
Hooks
first introduced in React
Vue
Svelte
general functional JS
Getting Closure on Hooks (JSConf Edition)
How to fetch data with React Hooks?
state
effect
Hacker News API
Introducing Hooks
react-hooks-testing-library
Run useEffect Only Once
All About React Query (with Tanner Linsley) — Learn With Jason
#TanStack
React Query
React Query - Essentials
React Query: Guides & Concepts: Optimistic Updates
Mutate the data without key at first #403
SWR
Cheatsheet
Common mistakes with React Testing Library
eslint-plugin-jest-dom
eslint-plugin-testing-library
How To Do the Basics in React Testing Library
React
Enzyme
React Testing Library
React Testing Library
Which query should I use?
the Guiding Principles