use()

use() 훅은 현재 experimental 버전에서만 지원합니다.

    interface ThenableImpl<T> {
        then(onFulfill: (value: T) => unknown, onReject: (error: unknown) => unknown): void | PromiseLike<unknown>;
    }
    interface UntrackedThenable<T> extends ThenableImpl<T> {
        status?: void;
    }

    export interface PendingThenable<T> extends ThenableImpl<T> {
        status: 'pending';
    }

    export interface FulfilledThenable<T> extends ThenableImpl<T> {
        status: 'fulfilled';
        value: T;
    }

    export interface RejectedThenable<T> extends ThenableImpl<T> {
        status: 'rejected';
        reason: unknown;
    }

    export type Thenable<T> = UntrackedThenable<T> | PendingThenable<T> | FulfilledThenable<T> | RejectedThenable<T>;

	/* Context<T>는 React.Context<T> */
    export type Usable<T> = Thenable<T> | Context<T>;

    export function use<T>(usable: Usable<T>): T;

특징

• data fetching에서 useState, useEffect 대신 사용할 수 있다.

import React from 'react';
/*
* before
*/
function Component({ url }) {
	const [data, setData] = React.useState();
  
  	React.useEffect(() => {
    	fetch(url)
      		.then(res => res.json)
      		.then(setData)
    }, [])
  
  	return <div>{data}</div>
}

/*
* after
*/
function Component({ url }) {
  	const data = React.use(fetch(url).then(res => res.json()))
  	return <div>{data}</div>
}

• 컴포넌트 최상단이 아니어도 사용 가능하다.

function Component({ url, shouldFetch }) {
  	let data = {};
  	if(shouldFetch) {
    	data = React.use(fetch(url).then(res => res.json()))
    }
  	
  	return <div>{data}</div>
}

• loading, error는 Suspense와 Errorboundary로 컨트롤

• 다음과 같은 경우 데이터를 한꺼번에 업데이트한다.

  1. use hook을 여러번 호출
  2. Suspense내부에 use훅을 사용하는 컴포넌트가 여러 개 있음

• 프로미스를 반환하는 경우 뿐만이 아니라 useContext의 대용으로도 사용 가능하다.

  • useContext(context)는 use(context)와 같다.
  • 같은 역할을 수행할 수 있지만 if, for등의 반복문에서도 사용 가능하기 때문에 활용도가 높다.

참고

This New React Hook Breaks All The Rules And I Love It