React Hooks

2022/06/30 (增加連結)

簡介

• Learn React Hooks in 2021 : With This Simple Guide + Extra Tips

• 5 New Hooks in React 18 : Exploring useTransition, useDeferredValue, useId, useSyncExternalStore, and useInsertionEffect

• React 16.7 的 Hooks 為何讓人眼睛一亮

  • 16.7沒有hooks，16.8才有 released on 2019/02/06

• React Hooks(一)：到底React Hooks 有何特別？

• React Hooks(二)：淺談useEffect及useReducer

• React Hooks(三)：Redux-React-Hook

  • React Hooks確實簡化了連接React及Redux之間的代碼，而React Hooks本質較為接近函數式思維(functional thinking)，也令要寫好單元測試更為簡單。當然，如上面所言，Redux-React-Hooks尚未成為正式專案，大家可以密切留意，看看是否會成為未來標準連接React及Redux的部件。

• React Hooks(四):全函數式React

• React | 為了與 Hooks 相遇 - Function Components 升級記

  • useState

  • useEffect

• React | 在 Hooks 中以 useContext 與 useReducer 實現 Redux

• React Redux | 小孩子才做選擇！ Hooks 和 Redux 我全都要！

  • useSelector

  • usePatch

  • useStore

• React Lifecycles with Hooks Explained

  • Mount Events

  • Update Events

  • Unmount Events

• Hook me up: Intro to React Hooks

  • Hooks based approach

    • useState()

    • useEffect()

  • Custom Hooks based approach

  • Lifecycle

    • render: This is the function component body itself.

    • componentDidMount, componentDidUpdate, componentWillUnmount: The useEffect can express all combinations of these.

    • shouldComponentUpdate: React.memo

    • constructor: Function components don’t need a constructor. You can initialise the state in the useState call. If computing it is expensive, you can pass a function to useState.

  • Some important Rules

    • Only call Hooks at the top level. Don’t try to call Hooks inside loops, conditions, or nested functions.

    • Only call Hooks from React function components. Don’t try to call Hooks from regular JavaScript functions.

• React Hooks 101

• Demystifying React Hooks

  • Refactoring a React component from class to hooks

  • Hooks to the rescue

    • useState

  • Should I use Hooks, classes, or a mix of both?

• What’s the big deal with React hooks?

  • It’s to do with state management

    • useState

• Why Bother Using React Hooks? (5 Minute Example)

  • useState

• React Hooks: A Simple Introduction

  • Installing React Hooks

  • Using the State Hook

  • Using the Effect Hook

• A Glance at React Hooks

• Getting your hooks into React

  • useState()

  • useEffect()

• React Hooks Tutorial — Learn by Building

  • useState()

  • useEffect()

• Learn the basics of React Hooks in <10 minutes

  • The State Hook

  • The Effect Hook

• How to destructure the fundamentals of React Hooks

  • Actually, use state

  • How to use effects

  • Trying to make use of context

• Let’s get hooked: a quick introduction to React Hooks

  • useState

  • useEffect

  • useReducer

  • Custom Hooks

• React Hooks Tutorial for Beginners: Getting Started With React Hooks (2019)

• Making Sense of React Hooks

• React Hooks — The Ins and Outs

• Letting Classes Off the Hook With React Hooks

• Start using hooks already

• Get Rid of Your React Class Component: React Hooks in a Nutshell

  • React.useCallBack

  • React.useEffect

  • React.useMemo

  • React.memo

• Get Hooked: Hooks in React and Beyond **

  • Why are Hooks so exciting?

    • Sharing stateful logic between components

    • Managing state in components

    • Lifecycle methods

    • Higher-order components and render props

  • How are Hooks implemented (at a high level)?

    • Closures

      • Stale closures and React hooks

      • Understanding the Closure Trap of React Hooks

    • Arrays

  • Built-in React Hooks

    • useState

    • useReducer

      • useReducer is an alternative to useState and is preferable when you have a lot of state to work with.

    • useEffect

• React Lifecycle & Hooks

  • Constructor( ) -> useState( )

  • componentDidMount( ) -> useEffect( )

• How to Load Data Easily With React Hooks

• How does React Hooks re-renders a function Component?

• React Hooks & Why They Make (Coding) Life So Much Easier

• Using renderless components in React to handle data

  • Refactoring: composition, SRP and SOC

  • Alternative: use a HOC

  • Enter the Hooks

• Cool kids handle state with Hooks

  • Using a class component

  • Using a functional component

    • Using the useState hook

    • Using the useReducer hook

• Rundown of the Most Important React Hooks

  • useState Hook

  • useEffect Hook

  • useContext Hook

  • useReducer Hook

  • useMemo Hook

  • Custom Hooks

• Clean Components with React Hooks

• Clean Components with React Hooks and the useReducer and useRef Hook

• React Hooks — Should We Be Hooked on Hooks?

• How I reduced the code in my Redux app by using Redux Hooks.

• Hooked on Hooks : Playing around with React Hooks

• Getting hooked on React Hooks

• React Hooks From Scratch A-Z

  • useState Hook

  • useEffect Hook

  • Tips for using useEffect Hook

  • Rules of React Hooks

• Some Best Practices for Building a React App With Hooks: A few handy tips to keep in mind when building an app from scratch

  • Proper folder structure

  • Asynchronous code with async/await

  • Basic error handling with try/catch blocks

  • Usage of React hooks

• Best Practices with React Hooks

  • Follow the rules of Hooks

  • Use the ESLint plugin for React hooks

  • Create your function components in the right order

  • useState can be used exactly like the class component’s state. Not just for a single value

  • Use custom hooks for sharing application logic

  • Avoid prop drilling with useContext

• Things to avoid when using React Hooks

• How to escape React Hooks Hell

• Container

  • Implementing the Container Pattern using React Hooks

  • Understanding the Container Component Pattern with React Hooks

• 5 Ways to Simplify Your React Hooks

  • Reduce Your `useState` Count

    • Prioritize Legibility

    • Evaluate the Contents of Your State Object

  • Take Advantage of Your Hook Return

  • Simplify Your `setState` Call With A Merge Hook

  • Consider Splitting Your Hook

  • Evaluate your `useEffect` calls to prevent unnecessary re-renders

• Patterns for Doing API Calls in ReactJS

  • API Call on Component Mount

  • API Call on User Event (i.e. onClick, Form Submission)

  • API Call on Search Field (autocomplete, table search)

  • API Call on Paginate (with a limit)

  • API Call on Serialize Requests (2nd API call based on the 1st API call)

• 6 Reasons to Use React Hooks Instead of Classes

  • You don’t have to refactor a functional component into a class component when it grows

  • You don’t have to worry about “this” anymore

  • No more method bindings

  • Easier to decouple logic from UI, making both more reusable

  • Keep related logic in the same place

  • Sharing stateful logic between components

• The Ugly Side of React Hooks (另一邊的說法)

• Decouple Data from UI with React Hooks

• We Have to Talk About Your love for React Hooks

• How to Use React Hooks Like a Professional

  • Use Hooks as They’re Supposed to Be Used

    • Only call Hooks at the top level

    • Only call Hooks from functional components

  • There’s an ESLint Plug-In for React Hooks — Use It

  • useState Can Be Used With Objects Too!

  • Custom Hooks Are Awesome!

  • Don’t Use Prop Drilling

• 5 Key Lessons React Tutorials Don’t Teach **

  • How React state is actually updated

  • It’s better to use multiple effects instead of one

  • Don’t optimize functions that update state (useState, useReducer)

  • The useRef hook can preserve state across renders

  • How to prevent your React app from crashing

    • react-error-boundary

• A mistake lots of React developers make almost everyday when using hooks.

• Common React Hooks Mistakes You Should Avoid

  • Changing the Hooks Invocation Order

  • Using useState when Re-Render is not Required

  • Handling Actions via useEffect

  • Using the Obsolete State

  • Missing useEffect Dependencies

• How to Create a Three-Layer Application with React Hooks **

  • The UI layer

  • The Business layer

  • The Data Access layer

Hooks API

• Hooks API Reference

  • Basic Hooks

    • useState

    • useEffect

    • useContext

  • Additional Hooks

    • useReducer

    • useCallback

    • useMemo

    • useRef

    • useImperativeHandle

    • useLayoutEffect

    • useDebugValue

• Everything you need to know about React Hooks

  • Basic hooks

    • useState

    • useEffect

    • useContext

  • More advanced hooks

    • useCallback

    • useMemo

    • React.memo (Not a hook, but new)

      • Phantom props, unnecessary renders and what no one told me about memo()

    • useReducer

    • useRef

  • Rarely used hooks

    • useLayoutEffect

    • useImperativeMethods

    • useMutationEffect

• Learn React Hooks

• Understanding re-rendering and memoization in React **

useState

• useState

• Using the State Hook

• Learn useState Hook in React

• How To Prevent Unnecessary React State Update Re-renders

• You Don’t Know useState Until You’ve Used Functional Updates **

  • 改變state有兩種方式:傳入新的值、透過function (functional update)

• How to Fix State That Does Not Update When Using React Hooks with setInterval

const timer = setInterval(() => {

setTime((time) => time + 1);

}, 1000);

• useContext

  • Simple Painter in ReactJS — useContext, useState

  • React — useState and useContext — moving from Class to Class-less

• useEffect

  • React Hooks: Managing Web Sockets with useEffect and useState

  • React Hooks — How To Use useState and useEffect Example

  • UseState With UseEffect

  • Dangers of using Objects in useState & useEffect ReactJS Hooks

    • Do not use an object as state

    • Use the useReducer hook

    • Use immutable.js

• useReducer

  • Why you should choose useState instead of useReducer

• How to Write UI components with optionally controllable state

• Manage State Easier with React Hooks

  • Add Local State to Functional Component

  • Extract Common State Logic

  • No More Wrapper Hell

• How to Reduce the Number of Re-renders When Updating States?

  • we can update one object instead state instead of multiple states.

• How to Control a Checkbox with React Hooks : Quick start with the useState hook

• 2 scenarios React State shouldn’t be used for — Thinking in ReactJs

  • Storing DOM Elements

  • Storing Props in the state and accessing them from the state

useEffect

• useEffect

• 5 useEffect Infinite Loop Patterns **

  • Without dependency

  • Function as dependency

    • useCallback

  • Array as dependency

    • useRef

  • Objects as dependency

    • useMemo

  • Wrong dependency

• Improving your mental model of useEffect

  • The API of useEffect:

    • Accepts a function

    • If it returns a function, it will do cleanup when the component is unmounted

    • Has an optional 2nd argument to pass in the data it depends on

      • If we leave it blank — it will run on every single render.

      • If we pass in an empty array — it will execute only when the component mounts, and not on any updates

      • If we pass in a value — it will execute when any of those values change

      • If you are using the react-hooks eslint plugin (and you should) — not providing the dependencies to your useEffect will give you warnings.

• Using the Effect Hook

• A Complete Guide to useEffect

• React useEffect Hook

  • When does useEffect run?

  • How do effects run?

  • Effects with cleanup

  • Example with multiple effects

• How to easily ignore useEffect HTTP calls with RxJS

• React useEffect Hooks in Action

  • Introduction to Effect Hooks

  • Using Multiple useEffect to Separate Concerns

  • Re-Rendering React Functional Component

  • Optimizing Performance By Skipping “useEffect”

  • Only Running useEffect Once

  • Cleanup in useEffect

• How React’s useEffect Hook Works

• Handle API calls using async await with the useEffect hook: Understand the issue with using async keyword directly for useEffect function

  • Create a separate async function and call it from useEffect

  • Use an IIFE(Immediately Invoked Function Expression)

• How To Easily Fetch Data With React Hooks: Using state in function components

• Tips for Using React’s UseEffect Effectively

  • Child Effects Fire First

  • The Dependency Array

  • Multiple useEffect for Cleaner Code

  • Handle Dependencies in Functions

  • Always Call Hooks at the Top Level

• React useEffect: 4 Tips Every Developer Should Know

  • Use a useEffect for a single purpose

  • Use custom hooks whenever you can

  • Conditionally run useEffect the right way

  • Type out every prop inside useEffect in the dependency array

• Prevent useEffect’s Callback Firing During Initial Render

• How to Make ComponentDidMount Using React Hooks

• Advanced React Hooks: Deep Dive into useEffect Hook

• Understanding the useEffect Dependency Array

  • What is a useEffect Hook?

  • What is a dependency array?

  • Do functions work in a dependency array?

  • Can we use mapStateToDispatch with useEffect?

• Stop Lying to React About Missing Dependencies

• A Tool for useEffect Dependencies in React :

• Avoiding Race Conditions and Memory Leaks in React useEffect : Learn how to deal with the “Can’t perform a React state update on an unmounted component” warning

• How to Make the useEffect Hook Not Run on Initial Render?

• The React UseEffect Hook Explained With Examples

• Using React’s useEffect like a pro

• Debouncing API requests in React : Use the useEffect React hook to make your application more efficient by debouncing API requests

• React v18: Why useEffect Suddenly Got Crazy? : Double mount in react useEffect() hook

• React 18 — the trickiness of useEffect : Learn about a tricky behavior of the useEffect hook when using a Strict Mode in React 18

• with useState

  • React Hooks: Managing Web Sockets with useEffect and useState

  • React Hooks — How To Use useState and useEffect Example

  • The possible delay pitfall between React’s useState and useEffect

  • Javascript Closures and React

useContext (Context)

• useContext

• This is how to use the react context API with hooks for a clean code architecture (2019)

• Using the React useContext Hook

• React — Why useContext() will clean your code

• React — useState and useContext — moving from Class to Class-less

• Simple Painter in ReactJS — useContext, useState

• Creating a dark mode for your React app with useContext()

• Passing callbacks down with React Hooks

  • useContext, useMemo, useCallback

  • We use the useMemo Hook to memoize the API object and the useCallback Hook to memoize the callbacks

• Dependency Injection in React

  • Context & useContext

• React: useContext and dependency injection

  • Using React Context

• How to Use React’s Context API and useContext() Hooks Effectively

• Hooks and Ladders : The useContext Hook

useReducer

• useReducer

• Hooked on hooks: how to use React’s useReducer()

• React useReducer hook

  • useReducer is another hook to manage the state in a component.

  • Avoid passing callbacks down

• How to Utilize the useReducer and useContext Hooks to Mimic Redux Architecture

  • Step 1: Action Constants, Action Creators, Reducer

  • Step 2: useReducer & Context Provider

  • Step 3: useContext

• React hooks useState and useReducer are equivalent in theoretical expressiveness

• Life after Redux

• How to Use the useReducer React Hook to Share Data Between Components

• Clean Components with React Hooks and the useReducer and useRef Hook

• 3 Ways To Handle State Better in React : Use useReducer, custom hooks, and more

  • "Magic" reducer: yet another approach on state management in React

• The Newbie’s Guide to Using The useReducer Hook in React

• TypeScript and React useReducer

• How to use useReducer() **

useCallback

• useCallback

• How to Use useCallback to Write Better React Code

• Can we rely on useCallback as a semantic guarantee?

  • Memoizing a function with useCallback to ensure it doesn’t change

  • What about cache busting?

• Exploring React Renders : Optimization and performance improvement using memo, useCallback, and useMemo

• useCallback Might Be What You Meant By useRef & useEffect

• How to use useCallback() hook

• How to Force a Component to Re-render with React Hooks?

  • One way to create a forceUpdate function from React hooks is to use the useCallback function.

• React Hooks — Using a wrapper to memoize event handlers and to prevent unnecessary re-renders

• Real-Life Use-Cases for useCallback and useMemo React Hooks

• How to useMemo and useCallback: you can remove most of them

• Debounce / Throttle

  • Using Debounce and Throttle With React Hooks

  • How to use Throttle or Debounce with React Hook

  • How to use Throttle and Debounce Callbacks in React with Hooks

    • By using debounce and throttle functions along with useMemo, we can control the frequent events invoked by actions like page scrolls, resizing the window, and typing values into input fields.

useMemo

• useMemo

• The useMemo Hook in React: How to optimize performance with useMemo hooks

• Boost Performance of Your React App With Memoization

  • React.memo()

  • useMemo Hook

• Should You Really Use useMemo in React? Let’s Find Out.

  • It is worth noting that the initial renders with useMemo take quite a setback in terms of performance. We expected an initial performance loss of around 5–10% consistently, but have found that this highly depends on the data/processing complexity and can even cause 500% performance losses, which is 100x more performance loss than expected.

• When Using useMemo is A Really Bad Idea

• How to Use the `useMemo` Hook in React to Build Efficient Components

• React.useMemo and when you should use it

  • What problem does useMemo solve?

    • useMemo is a React hook that memorizes the output of a function. That is it. useMemo accepts two arguments: a function and a list of dependencies. useMemo will call the function and return its return value. Then, every time you call useMemo again, it will first check if any dependencies have changed. If not, it will return the cached return value, not calling the function. If they have changed, useMemo will call the provided function again and repeat the process.

  • When should you use it?

    • The easiest way to do it is to write code without useMemo first, then add as needed.

  • But do not overuse it

    • The overhead

    • No guarantees

  • Bonus: useCallback

    • useCallback is pretty much the same as useMemo, but for functions.

  • **請注意，有些網友指出內容有些錯誤

• useMemo why, when & how

• with useCallback

  • How to Memoize Components in React: Using React.memo, useMemo other APIs to limit re-rendering of components

    • Introducing Memoizing with React.memo

    • The useMemo and useCallback Hooks

    • Memoizing Considerations

  • Improve Performance in React.js Using Hooks: Understanding the power of useCallback and useMemo

  • Optimise React App Performance Using useMemo() and useCallback() Hooks Wisely.

  • Introduction to React.memo, useMemo and useCallback

    • What is React.memo

      • We use React.PureComponent with class component while React.memo works with functional components

    • useMemo and useCallback

      • useMemo returns a memoized value

      • useCallback returns a memoized callback

  • Using the useCallback and useMemo Hooks in React Components

    • We can use useCallback to cache functions and only recreate them when a state or prop changes.

    • The useMemo lets create variables derived from state or prop values and cache them until any dependent value changes.

  • When to useCallback and useMemo

  • React Performance: How to avoid redundant re-renders

useRef

• useRef

• React useRef Hook

  • Accessing the DOM nodes or React elements

  • Keeping a mutable variable

  • Updating a ref

• React: Using Refs with the useRef Hook

  • Refs: Component mutations in React without state

• How To Properly Use the React useRef Hook in Concurrent Mode

• Clean Components with React Hooks and the useReducer and useRef Hook

• React Hooks - Passing Child Component State Up with useRef

  • useRef hook can be helpful when passing state up from nested components where the component destination, doesn’t relay on that data. This technic doesn’t apply only for states, we can pass any data to a higher component in the tree using useRef.

• React.useRef and React.createRef: The Difference: The similarities and differences of React.useRef and React.createRef.

  • React.createRef are used in class components to create refs.

  • In function components, we use React.useRef

• How to Use The Forwarded Ref in React

• 6 Practical Applications for useRef

• useRef in React

• Cancelling Fetch Requests in React Applications : Using useEffect, useRef and TypeScript

• How to useRef to Fix React Performance Issues: And how we stopped our React context from re-rendering everything

• Using React Function Components directly as Refs

• How to useRef to Fix React Performance Issues : And how we stopped our React Context re-rendering everything

useImperativeHandle

• useImperativeHandle

• What is the Best Way to Build a Login Page?

  • Using React’s forwardRef and useImperativeHandle, we are able to receive the Input component’s values and functionalities that we defined, and use them in the parent component as required.

• How and when to use useImperativeHandle and forwardRef

useLayoutEffect

• useLayoutEffect

useDebugValue

• useDebugValue

useId (React 18)

• An Introduction to the useId() Hook in React 18 : The used() hook is a new way to generate a unique random Id in React 18.

• useId(), the new hook introduced in React 18

• useId() The latest hook in React 18

useTransition (React 18)

• React18 | useTransition hook | Very effective

useEvent (future)

• Meet React useEvent(): The Latest and Greatest React Hook

• React may be getting a new hook — useEvent

• React Hook — useEvent

custom hooks

• React- Your First Custom Hook

• Cleaner code with React custom hooks!

• Compose React Hooks Like Composing React Components: Why custom hooks are so powerful

• Things you must know about React JS | Custom hooks/Lazy Loading /HOCs

• Using custom hooks to reduce component complexity

• Separation of concerns with custom React hooks

• Reusable code with React hooks

• How to Separate Logic & UI in React Using Custom Hook

• React Custom Hook: useSubmit

• useTime() React Hook

• Adding Search to a Full-Stack React Application: Using custom hooks to implement a debounced search feature.

• Using Hooks for Lazy-Loading Images in React: Using Intersection Observer for lazy-loading images in React by creating and using a custom Hook: useIO

• Create a Custom useModal() React Hook

• How to Create a Custom useCopyToClipboard React Hook

• How to Create a Custom useDeviceDetect() React Hook

• useAbstraction: React Hooks as a Tool for Abstraction and Encapsulation

• ReactJS: A Simple Custom Hook

• A React Hook to Animate the Page (Document) Title and Favicon

• 15 Custom Hooks to Make your React Component Lightweight

• 7 Custom React Hooks You Probably Need in Your Project

• React Custom Hooks #1: useLocalStorage : Make simple persisting data on the localStorage with React to save user preferences.

• React Custom Hooks #2: useFontSize : Set and use a global CSS variable to change the base font size of your page.

• React Custom Hooks #3: useToggle and useBoolean : Improve your way of conditionally render React components with these custom hooks.

• 5 Custom ReactJS Hooks for every project

• Custom Hooks to Lightweight Your React Project

• React Design Patterns: Return Component From Hooks

• Five React hooks useful in any project.

  • useModalState

  • useConfirmationDialog

  • useAsync

  • useTrackErrors

  • useDebounce

• useAsync: A cleaner way to fetch data from APIs

• Scrolling

  • How To Create a Custom useInfiniteScroll() With React Hooks

  • How To Do Infinite Scrolling the Right Way

    • Intersection Observer to the Rescue

• Debounce

  • Debouncing in React with our own Custom React hook

  • How to Debounce Props With React Hooks

  • Using a Debounced Callback in React (with hook)

  • Debounce Your Complex Selectors With React Hooks : Debouncing dependency-hungry React Redux selectors

• Internationalization (i18n) in React using hooks

• Clean Up Your React Code With Custom Hooks

  • Custom hook with useMemo

• Build a Real-Time Chat App With React Hooks and Socket.io

• Build a Sticky Table Header with React Hooks : Confront table limitation

• s and turn its header into a sticky element with React hooks.

• useOnlineStatus — A React hook to know when your app is offline

• State

  • A Custom useStateMachine React Hook

  • Persisting State in React Apps : usePersistedState

  • Introducing StateLake: You’ll Love Managing States This Way : A tiny React library for hooks-style state management with a shared store **

• How to Use the React Hook useDeepEffect: A custom React Hook to perform a shallow equality check on the dependencies of a useEffect Hook

• useStatus: A Custom React Hook for Managing UI States

Breakpoint

• • useBreakpoint Hook — Get Media Query Breakpoints in React: Creating a custom Hook to get window widths or breakpoints

  • How To Use Media Queries Programmatically in React: useBreakpoint hook #extended

Fetch

• • Create a Custom useFetch() React Hook

  • Create a mini React project using the useFetch hook

  • useFetch and Custom React Hooks

  • How to Build a Custom React Hook for Fetching Data

  • Custom React Hook for Data Fetching

  • Write a Custom Reusable Hook (useFetch).

• Here Are 6 Awesome React Hooks

  • @rehooks/component-size

  • @rehooks/window-scroll-position

  • @rehooks/local-storage

  • react-use-form-state

  • react-fetch-hook

  • use-onclickoutside

• 4 Nice and Simple React Hooks : useDebounce, useWhenVisible, useTimeout, and useInterval

• 4 Custom Hooks to Boost Your React App

  • usePrefetch

  • useGeo

  • useInterval

  • useTimer

• 8 Awesome React Hooks

  • useTimeout

    • With this hook, we can implement setTimeout using a declarative approach.

  • usePrevious

    • With it, we can store props or the previous state.

  • useClickInside

    • If you deal with event handling for clicking inside of wrapped components then the useClickInside hook is the right choice for you.

  • useClickOutside

    • The useClickOutside hook is quite similar to the useClickInside hook but it takes care of clicking outside a wrapped component and not inside.

  • useFetch

    • The useFetch hook can be used to implement fetch in a declarative way.

  • useInterval

    • If you want to implement setInterval in a declarative manner you can use this hook called useInterval.

  • useComponentDidMount

    • This hook is a small example of how to execute a callback right after a component is mounted.

  • useComponentWillUnmount

    • useComponentWillUnmount is similar to the example above but will execute a callback as soon as the component is unmounted.

• 11 Useful Custom React Hooks for Your Next Web App

  • useClippy

  • useBrowserContextCommunication

  • useScript

  • useLocalStorage

  • useIdb

  • use-mouse-action

  • useOnlineStatus

  • useDocumentTitle

  • useNetworkStatus

  • useSpeechSynthesis

  • useSpeechRecognition

• 7 Awesome React Hooks

  • useFiler Hook (crooks)

  • useFetch Hook (Captain Hook)

  • useHover Hook (Captain Hook)

  • useSlug Hook (Captain Hook)

  • useDrag and useDrop Hooks (ahooks by Alibaba)

  • useDarkMode Hook (React Receipt)

• Top React Hooks — Arrays and Cookies

  • React Recipes

    • useArray

    • useAsync

    • useCookie

• Useful Custom Hooks for Tired React Devs

  • Universal Hooks

    • useMounted

    • useWebSocket

    • useLoading

  • React Native

    • useStatusBar

• React context api without unwanted re-renders : react-hooks-in-callback

• 10 Useful Custom React Hooks

• Why Custom React Hooks Could Destroy Your App’s Performance

• useViewport custom hook

• Hook Libraries

  • ahooks 3.0 is coming! a high-quality and reliable React Hooks library! (by Alibaba Group)

  • Top 10 React Hook Libraries : Recommended React hook libraries in 2021

Tips

• React-cache, time slicing, and fetching with a synchronous API

  • react-cache & fiber

• Why React’s new Hooks API is a game changer

• React hooks: not magic, just arrays

• Why React Hooks, and how did we even get here?

  • You should call hooks at the top level of the render function.

  • You can only use hooks in React Function Components, and in Custom Hooks.

  • There aren’t hook primitives for componentDidCatch or getSnapshotBeforeUpdate.

• Simple Code Reuse with React Hooks

• React Hooks: Cliff Notes for the Junior Dev

• React Hooks, First Impressions

• Why I’m excited with React Hooks?

• Coding a Finite-State Machine in a React Hook

• Higher Order Components in a React Hooks World

• React Hooks: Memoization

  • React.memo

  • useState

  • useReducer

  • useCallback

• How to make an app drawer with React Hooks and CSS

  • Part 1: Toggle Button

    • useState

  • Part 2: The Drawer

  • Part 3: Polish

• How to detect an outside click with React and Hooks

• React Dark Mode with Styled Theming and Context

• React Hooks in Apollo client for GraphQL queries and mutations

• The Iceberg of React Hooks

  • React Hooks Radar

    • Green hooks are main building blocks of modern React applications. They are safe to use almost everywhere without much thinking.

      • useReducer

      • useState

      • useContext

    • Yellow hooks provide useful performance optimizations by using memoization. Managing lifecycle and inputs should be done with caution.

      • useCallback

      • useMemo

    • Red hooks interact with mutable world using side effects. They are most powerful and should be used with extreme caution. Customs hooks are recommended for all non-trivial use-cases.

      • useRef

      • useEffect

      • useLayoutEffect

  • Obey Rules of Hooks.

  • Don’t do any side-effects in main render function.

  • Unsubscribe/dispose/destroy all used resources.

  • Prefer useReducer or functional updates for useState to prevent reading and writing same value in a hook.

  • Don’t use mutable variables inside render function, use useRef instead.

  • If what you save in useRef has smaller lifecycle than the component itself, don’t forget to unset the value when disposing the resource.

  • Be cautions with infinite recursion and resource starvation.

  • Memoize functions and objects when needed to improve performance.

  • Correctly capture input dependencies (undefined => every render, [a, b] => when a or b change, [] => only once).

  • Use customs hooks for non-trivial use-cases.

• React Hook “Gotcha’s”

  • Testing Effects

    • Substituting useEffect with useLayoutEffect gets the tests to pass.

  • Functions as State

  • Setting State in Unmounted Components

• React Hooks — How to use Hooks conditionally (Click Outside example)

  • Creating a custom Dropdown

• Mastering TypeScript for React Hooks

• How to Clear Timeout and Interval Timers with React Hooks?

async

• A React hook for asynchronous state

  • use-async-function

• Introduction to abortable async functions for React with hooks

createReducer

• Did you know — createReducer Works with React Hooks. Here’s how.

• Write Cleaner Reducers

Design patterns

• Essential React Hooks Design Patterns

• Advanced React Patterns with Hooks

  • Render Props

  • Prop Getters

  • Compound Components

• Programming Patterns with React Hooks

  • Observer

    • An Observer will attach itself to the Subject and wait patiently.

    • When the Subject changes, it will go notify all the observers with the latest data.

  • Provider

    • The way it works is that a Provider sets some values on a Context object that is set on a parent level of the component tree.

    • Any of the child components , called Consumers, can then grab those values from the context directly, instead of having to pass the values through the props of each of the children.

• React Hooks: Inverting Container/Presenter

• How To Use an IntersectionObserver in a React Hook

Fetch Data

• How To Fetch Data From An API With React Hooks with fetch

  • Step 1 — Refactoring from a class to functional component

    • useState

  • Step 2 — useEffect

  • Step 3 — moving from this.setState({}) to hooks

    • also add async await

• How to fetch data with React Hooks? with Axios

  • Data Fetching with React Hooks

  • How to trigger a hook programmatically/manually?

  • Loading Indicator with React Hooks

  • Error Handling with React Hooks

  • Fetching Data with Forms and React

  • Custom Data Fetching Hook

  • Reducer Hook for Data Fetching

  • Abort Data Fetching in Effect Hook

• Hook Your Fetch Requests With React

  • backend: mockapi

  • fetch

• Making API Calls with React Hooks

  • fetch

• Fetch an API with React Hooks

• React Hooks — Search an API

• Fetch API data using useEffect React hook

• Making fetch requests using React.js hooks

Form

• Convert a React Class-Based Component to a Functional One Using a State Hook (form)

• How to Get Started With React Hooks: Controlled Forms

• Form Validation with React Hooks

• Inline form validations — UX design considerations and React examples

• React Hooks — designing a simple forms API — part 1

• React Hooks — designing a simple forms API — part 2

• React Hooks — designing a simple forms API — part 3 — validation and a running example!

• React Hooks — designing a simple forms API — part 4 — scaling to other input types

• React Hooks, form validation, and complex state

• How I built an async form validation library in ~100 lines of code with React Hooks

• How to Build a Dynamic, Controlled Form with React Hooks (2019)

• Hook into complex form state using React

• Handling complex form state using React hooks

• Create a dynamic form in React using Hooks

• Creating Re-usable React Forms with Custom Hooks

• Easily Create a Form With React Hooks

  • Received input from an end-user in one child component

  • Stored that data in a local state

  • Created a shared state at the top level

  • Populated the shared state with multiple instances of the local state

  • Output the shared state to a different child component

• Best Practices for Handling a Form With Multiple Inputs Using React Hooks : Building an advanced filter with an elegant solution

  • handling controlled forms (storing values of inputs in a state)

  • controlling multiple inputs with the help of useReducer hook

  • filtering data using Array.filter() method

Global State Management

• Managing global state with React’s Hooks & Context API: Alternative to Redux for complex React application

  • React state management before Redux

  • Global state management using Redux

  • Global state with State Hook and Context

  • Global state with Reducer Hook and Context

  • global-store-hook: a npm package

• Manage global state with React Hooks

  • React hooks and ReactN

• Global state management with React Hooks

  • react-hookstore

• Easy Peasy global state in React w/ Hooks

  • ctrlplusb/easy-peasy

• Understanding State Management in JavaScript by Building a Library Similar to Redux (with hooks)

  • use-simple-state

• State Management with React Hooks — No Redux or Context API

  • useState(), useEffect()

• BLoC Pattern with React Hooks

• Hooking up a React state store: A simple React state store using hooks

  • React’s setState hook can be used to hold the store state and createContext (together with the context Provider and the useContext hook) can be used to pass the store state down to the components that need it.

• Four patterns for global state with React hooks: Context or Redux

  • Pattern 1: Prop passing

  • Pattern 2: Context

  • Pattern 3: Multiple contexts

  • Pattern 4: Redux

Map

• Using ES6 Map with React State hooks

Migration from class components

• 10 Steps to Convert React Class Component to React Functional Component with Hooks

  • change

class NameOfComponent extends Component {

to

function NameOfComponent(props){

• • remove the constructor

  • remove the render() method, keep the return

  • add const before all methods

  • remove this.state throughout the component

  • remove all references to ‘this’ throughout the component

  • Set initial state with useState()

  • change this.setState() … instead, call the function that you named in the previous step to update the state…

  • replace compentDidMount with useEffect

  • replace componentDidUpdate with useEffect

• Introduction to React Hooks: How to use State Hooks in React

  • Stateful Components

  • Working With Stateless Components

  • Working With React Hooks

    • Creating Stateful Components using functions

  • Some More Benefits of Using Hooks

    • Classes are complex

    • Class components become hard to understand with time

• Why React hooks?

  • Component Size

  • Method Reuse

  • Performance and Confusion

  • Clean Your Code, Clean Your Mind

• From Class Components to Hooks: A brief history

  • state objects & setState calls -> useState

  • Lifecycle Methods -> useEffect

• React Hooks: Migration from Class to Function Components

  • Component State with React's useState Hook

  • Component Side-Effects with React's useEffect Hook

  • Abstraction with Custom React Hooks

• 5 Ways to Convert React Class Components to Functional Components w/ React Hooks

  • Class without state or lifecycle methods

  • Class with state

  • Class with multiple state properties

  • Class with state and componentDidMount

  • Class with state, componentDidMount and componentDidUpdate

  • Convert PureComponent to React memo

• React Hooks versus Classes

  • Managing State

  • Side Effects

  • Optimization

• Converting React Class Components to Function Components using Hooks (ToDo app)

Performance

• React Hooks: Optimizing for performance

  • useCallback

  • useMemo

• Adventuring Into React Hooks Performance Practices

  • Re-Renders Matter

    • Rule 1: Do Not Split State Between Several useState Methods for Connected Data Models

  • Custom Hooks

    • Rule 2. Make Sure You Return New Objects From Custom Hooks Only If They’ve Changed

  • How to Find These Re-Renders Before It’s Too Late?

• Do React’s hooks improve app performance?

Redux

• useRedux — state management pattern with React Hooks

• Writing Redux-like simple middleware for React Hooks

• Using Hooks to Replace Redux

  • With the useState hook, the business logic responsible for computing the new state would have to be inside all the components that would update the state.

  • With useReducer we can have all the business logic in one place (the reducer itself), making it easy to maintain and keeping the components focused on what they were primarily designed to do.

  • The useReducer hook keeps the “dispatching an action to update the state” pattern that’s used by Flux, Redux, Vuex and other state management solutions.

• How to Utilize the useReducer and useContext Hooks to Mimic Redux Architecture

  • Step 1: Action Constants, Action Creators, Reducer

  • Step 2: useReducer & Context Provider

  • Step 3: useContext

• Mimic Redux with React Context API and hooks

• A simpler entry to Redux (without Redux) using React Hooks

  • Creating the Store

    • React.createContext()

    • Binding reducer to Store Provider

  • Defining the Reducer

  • Defining the Action creators

  • Connecting the store to the View

    • React.useContext()

  • Dispatching actions from the View

    • Introducing References with the React.useRef() hook

• How to integrate React Hooks into your project without changing your Redux code

• React Hooks(三)：Redux-React-Hook

  • React Hooks確實簡化了連接React及Redux之間的代碼，而React Hooks本質較為接近函數式思維(functional thinking)，也令要寫好單元測試更為簡單。當然，如上面所言，Redux-React-Hooks尚未成為正式專案，大家可以密切留意，看看是否會成為未來標準連接React及Redux的部件。

• Hooks in React Redux

• How To Use Redux with React Hooks

  • Step 1 — Refactoring our class component to a functional component

  • Step 2— useSelector

  • Step 3— useDispatch

• React | 在 Hooks 中以 useContext 與 useReducer 實現 Redux

• Introducing: Redux Hooks

  • react-redux@next

    • useSelector()

    • useDispatch()

    • useCallback()

    • useStore()

• The Latest and Greatest Redux Hooks API: Implementing the newest Redux Hooks

  • useSelector()

  • useDispatch()

• Clean Up Redux Code with React-Redux Hooks: with redux hooks

  • useSelector()

  • useDispatch()

• Developing React custom hooks for Redux without react-redux

  • useReduxDispatch

  • useReduxState

• Seamless data fetching with Redux and React Hooks

• Refactoring Redux into React Hooks

• Handling loading and error states the right way

  • Using state objects

Router

• How React Hooks can replace React Router with hookrouter

• Modern and clean routing with hooks with hookrouter

• Updates about React hook router

• Building Basic React Authentication: Using hooks and context with react router

  • Goals For This Authentication System

    • Private and public routes

    • Redirect to Login

    • Redirect to referrer

    • Authentication Tokens

    • UI is intuitive and straightforward

• Reach router

  • Battle of the Routers: Reach Router vs React Router

  • The Future of React Router and @reach/router with @reach/router

  • A React Hook for universal routing with @reach/router

• How to convert withRouter to a React Hook

  • useReactRouter

Suspense

• When to use React Suspense vs React Hooks

  • React Suspense is to a Monad as Hooks are to Applicative Notation

  • Effectful.JS is a transpiler for embedding effectful into JavaScipt. It supports both Monadic and Applicative targets. It greatly simplifies programs in the designing, implementing, testing, and maintaining stages.

• Hooks and Suspense- React’s Class Warfare

  • “Suspense” gives React developers the ability to suspend the rendering of a component while it’s waiting for the resolution of other a-synchronous operations.

  • “Concurrent Rendering,” similarly with “Suspense,” can pause expensive rendering processes to make high priority DOM updates first. It can be used in combination with “Suspense” to improve user experience by “skipping unnecessary loading states on fast connections.”

  • “Hooks” allow function components to use state and lifecycle features.

examples

• Build a CRUD App in React with Hooks

• How to Build a Todo List with React Hooks

  • with Material UI

• React Hooks in Action: Building a Todo App (hint: no classes)

• How to build a movie search app using React Hooks

• React Hooks Tutorial — Create a Number Trivia Generator Website

• Mapbox

  • How to Animate Map Markers Using Mapbox and React Hooks

  • Getting Started with React and MapBox GL JS: User Location Marker with a Marker Component

• Build a React Accordion Component from Scratch Using React Hooks

• Let’s Learn React Hooks and Context API by Building a Recipe Search App (part 1)

  • useState

• Let’s Learn React Hooks and Context API by Building a Recipe Search App (part 2)

  • useEffect

  • useContext

• Advanced React (anti)patterns

  • This hook takes two functions as arguments. First function represents what has to be done before waiting and second function represents what has to be done before resuming. Hook returns two functions — first to start the action and second to resume the original flow. Usage would look like this.

• Using React Hooks to Wrap Connectors to Live Data Sources

• React Hooks: Making it easier to compose, reuse, and share React code

• Using React Hooks to sync your component state and the URL Query string

• The Power of React Hooks: Create an app using only this new feature from React

• On the power of Hooks: Part 1

  • we’ve learned how to use a hook to let our component play audio files

• On the power of Hooks: Part 2

  • we’ve learned how to enhance a component to always be aware of the current time

• On the power of Hooks: Part 3

  • 
    

• Creating reusable custom React Hooks

• Mastering Drag & Drop using ReactJS hooks

  • with styled-components and lodash

• How to add to an array in React State: The push() function will not work, but the concat() function can update state in React when state is a JavaScript array.

• Intro to React Hooks with simple examples

  • Example 1: State in a Simple Form

    • useState

  • Example 2: Side Effects with a Stop/Go Timer

    • useEffect & custom hook

  • Example 3: Themed Blog

    • useContext

• Build a React App using Basic Hooks

  • Creating React App

  • Using Materialize

  • Using Context

  • Creating Components

  • Updating the App component

  • Styling the App

  • Testing the App