Context

2022/02/15 (增加連結)

Context

Context就是一個跨元件傳遞資料的API，在沒有Context之前，當很多元件要共用資料時，就必須使用Redux，如果共用的情境很單純的時候，使用Context就夠了，所以，並不能完全用Context取代Redux。

• Compound Component Pattern and React Context

• Fixing Re-Renders When Using Context in React

• Context Module Pattern in React

• Should a React Context Be That Expensive?

• How to Write Performant React Apps with Context

Without hooks

• How To Use The React Context API (Pre-Hooks)

• Deep dive into new React context API

  • Provider

  • Consumer

  • React.createContext

• Using the React Context API

  • Why use Context?

  • What is a Provider and what is a Consumer?

  • Overall reflections on getting started with React Context

• Learn the React Context API with a Practical Example You Can Bring to Your Apps

• Sharing state using React’s Context API

• React context API (Part 1) — Passing state to child components made easy

• React context API (Part 2) — Updating state through a Consumer

• React compound component with context API

• Compound Components with React Context API

• Sharing State with the React Context API

• React Context Using TypeScript

With hooks (useContext)

• React Context API 跨元件傳遞資料

  • createContext 建立資料

  • Provider 提供value

  • Consumer 提取 value

  • context更新 rerender取用元件

  • contextType 取值

  • Hooks useContext

• React — Why useContext() will clean your code

• Using the React useContext Hook

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

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

• Dependency Injection in React

  • Context & useContext

• React: useContext and dependency injection

  • Using React Context

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

• Simple Painter in ReactJS — useContext, useState

• 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

• 透過 React CreateContext 搭配 React useContext 與 useReducer 來做 Global State Manager

• React Global Component With Hooks: useContext is the right Hook if you need to make a global component

• State Management with React Hooks and Context API in 10 lines of code!

  • useState

  • useReducer

  • createContext, useContext

• How we handle React Context

  • The React Context API is great. It solves with elegance the problem of passing stuff deep down your component hierarchy. However, it’s a good practice to avoid coupling your components with the Context API. It’s easy to do so by making your components receive what they need via props or using custom Hooks.

• Demystifying React Context

  • Step 1 — creating our context object

  • Step 2 — Apply the provider

  • Step 3 — Setup the consumers

    • Method 1 — using the Consumer component

    • Method 2 — using this.context & contextType

    • Method 3 — useContext method

• 4 options to prevent extra rerenders with React context

  • Option 1: Split contexts

  • Option 2: React.memo

  • Option 3: useMemo

  • Option 4: react-tracked (recommended)

• React Context Patterns with useContext Hook

  • Why Choose Context?

  • How to Use Context?

    • Pattern A — The Basics

    • Pattern B — A Separation

    • Pattern C — Redux-Lite

  • Overall, they all follow the same two steps:

    • Step 1: Create a Provider HOC with React.creatContext()

    • Step 2: Create a React custom hook that returns the state and state updating function from the context.

• The Elegant Context Pattern in React: Composing the React Context Provider and useContext Hook so they can be used and re-used comfortably

• Building a CRUD App with React Hooks & the Context API

• Context in React Hooks

• React hooks: using Context API with functional components

• React Context — Simplified

• How to use React Context with Hooks & TypeScript

• Developing a Powerful Alert System Using React Context API

• React Hooks and Context

Context vs. Redux

• Choosing between Redux and React’s Context API

  • Context is designed to share data that can be considered “global” for the entire React app.

• How React Context can come to the rescue if you don’t know Redux

  • Context has 3 main blocks:

    • A context Object

    • A context Provider

    • A context Consumer

  • Context can definitely be used for low-frequency updates but is not recommended for general state management.

• Replacing Redux with React Hooks and Context: A small concrete example with reactive-react-redux

  • Types and reducers

  • Action creators

  • Components

• Replace Redux state with React Hooks and Context

  • Create React App.

  • Import useReducer and useContext from React.

  • Create a reducer switch case.

  • Create an initial state.

  • Pass state and dispatch to whichever component with 1 line (!!) of code.

• Rolling your own Redux with React Hooks and Context

• Rethinking State Machines in React

Multi-language

• What can the React Context API do for you? Multi-language text, Modals, and Themes

• How to Add Multi Language Support to Your Application using React Context

Form

• Learn the simple way of building forms in React using Context API

  • State management

  • Form example

    • with react-standalone-form library

  • Visual flexibility