useContext() là cách để không phải dùng Consumer

Bình thường, hàm createContext() sẽ cho ta dùng 2 JSX: Provider cho đầu vào, và Consumer cho đầu ra.

Đầu vào

import { createContext } from 'preact'

const TênContext = createContext('Alice')

export default function App() {
    return (
        // provide the username value to our subtree:
        <TênContext.Provider value="Bob">
            <ComponentCon>
                ...
                <ComponentConCháuChắtChútChít />
                ...
            <ComponentCon />
        </TênContext.Provider>
    )
}

Đầu ra

import { TênContext } from "../routes/index.tsx";

export default function ComponentConCháuChắtChútChít(){
    return (
        <TênContext.Consumer>
            {username => (
              // access the current username from context:
              <span>{username}</span>
            )}
        </TênContext.Consumer>
    )  
} 

Khi dùng useContext(), đầu ra bây giờ trông như sau:

import { TênContext } from "../routes/index.tsx";
import { useContext } from "preact/hooks";

export default function ComponentConCháuChắtChútChít(){
    const username = useContext(TênContext)
    return <span>{username}</span>
} 

Việc dùng hook này không chỉ làm code ngắn hơn mà nó còn cho ta được lấy giá trị như một biến bình thường mà không phải ở trong JSX
Nó giống như việc await với async là cách để viết hàm bất đồng bộ với tư duy khi viết hàm tuần tự

Nguồn:: Context | Preact: Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM.
createContext() nằm ngoài global, useContext() nằm trong component