const value = use(resource)

import { use } from 'react'

function MessageComponent({ messagePromise }) {
  const message = use(messagePromise)
  const theme = use(ThemeContext)
  // ...
}

// when use 'useContext' hook
import { useContext } from 'react'

function Button() {
  const theme = useContext(ThemeContext)
  // ...
}

// when use 'use' hook
import { use } from 'react'

function Button({ show, children }) {
  if (show) {
    const theme = use(ThemeContext)
    const className = 'button-' + theme

    return <button className={className}>{children}</button>
  }
  return false
}

function ClientComponent() {
  useEffect(() => {
    const doAsync = async () {
      await doSomething('...')
    }

    doAsync()
  }, [])

  return <>...</>
}

import { use } from 'react'

function Component() {
  const data = use(promise)
}

function Note({ id, shouldIncludeAuthor }) {
  const note = use(fetchNote(id))

  let byline = null
  // 조건부로 호출하기
  if (shouldIncludeAuthor) {
    const author = use(fetchNoteAuthor(note.authorId))
    byline = <h2>{author.displayName}</h2>
  }

  return (
    <div>
      <h1>{note.title}</h1>
      {byline}
      <section>{note.body}</section>
    </div>
  )
}

const cachedFn = useCallback(fn, dependencies)

import { useCallback } from 'react'

function ProductPage({ productId, referrer, theme }) {
  const handleSubmit = (orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    })
  }
}

import { useCallback } from 'react'

function ProductPage({ productId, referrer, theme }) {
  const handleSubmit = useCallback(
    (orderDetails) => {
      post('/product/' + productId + '/buy', {
        referrer,
        orderDetails,
      })
    },
    [productId, referrer]
  )
  // ...
}

const value = useContext(SomeContext)

function MyPage() {
  const [theme, setTheme] = useState('dark')
  return (
    <ThemeContext.Provider value={theme}>
      <Form />
      <Button
        onClick={() => {
          setTheme('light')
        }}>
        Switch to light theme
      </Button>
    </ThemeContext.Provider>
  )
}

useDebugValue(value, format)

const deferredValue = useDeferredValue(value)

import { useState, useDeferredValue } from 'react'

function SearchPage() {
  const [query, setQuery] = useState('')
  const deferredQuery = useDeferredValue(query)
  // ...
}

useEffect(setup, dependencies)

import { useEffect } from 'react'
import { createConnection } from './chat.js'

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234')

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId)
    connection.connect()
    return () => {
      connection.disconnect()
    }
  }, [serverUrl, roomId])
  // ...
}

function useChatRoom({ serverUrl, roomId }) {
  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId,
    }
    const connection = createConnection(options)
    connection.connect()
    return () => connection.disconnect()
  }, [roomId, serverUrl])
}

import { useState, useEffect } from 'react'
import { fetchBio } from './api.js'

export default function Page() {
  const [person, setPerson] = useState('Alice')
  const [bio, setBio] = useState(null)

  useEffect(() => {
    let ignore = false
    setBio(null)
    fetchBio(person).then((result) => {
      if (!ignore) {
        setBio(result)
      }
    })
    return () => {
      ignore = true
    }
  }, [person])

  // ...
}

import { useState, useEffect } from 'react'
import { fetchBio } from './api.js'

export default function Page() {
  const [person, setPerson] = useState('Alice')
  const [bio, setBio] = useState(null)
  useEffect(() => {
    async function startFetching() {
      setBio(null)
      const result = await fetchBio(person)
      if (!ignore) {
        setBio(result)
      }
    }

    let ignore = false
    startFetching()
    return () => {
      ignore = true
    }
  }, [person])

  // ...
}

function ChatRoom({ roomId }) {
  // 이것은 반응형 값입니다
  const [serverUrl, setServerUrl] = useState('https://localhost:1234') // 이것도 반응형 값입니다

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId) // 이 Effect는 이 반응형 값들을 읽습니다
    connection.connect()
    return () => connection.disconnect()
  }, [serverUrl, roomId]) // ✅ 그래서 이 값들을 Effect의 의존성으로 지정해야 합니다
  // ...
}

const serverUrl = 'https://localhost:1234' // 더 이상 반응형 값이 아님

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId)
    connection.connect()
    return () => connection.disconnect()
  }, [roomId]) // ✅ 모든 의존성이 선언됨
  // ...
}

// bad
function Counter() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(count + 1) // 초마다 카운터를 증가시키고 싶습니다...
    }, 1000)
    return () => clearInterval(intervalId)
  }, [count]) // 🚩 ... 하지만 'count'를 의존성으로 명시하면 항상 인터벌이 초기화됩니다.
  // ...
}

// good
import { useState, useEffect } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount((c) => c + 1) // ✅ State 업데이터를 전달
    }, 1000)
    return () => clearInterval(intervalId)
  }, []) // ✅ 이제 count는 의존성이 아닙니다

  return <h1>{count}</h1>
}

const serverUrl = 'https://localhost:1234'

function ChatRoom({ roomId }) {
  const [message, setMessage] = useState('')

  const options = {
    // 🚩 이 객체는 재 렌더링 될 때마다 새로 생성됩니다
    serverUrl: serverUrl,
    roomId: roomId,
  }

  useEffect(() => {
    const connection = createConnection(options) // 객체가 Effect 안에서 사용됩니다
    connection.connect()
    return () => connection.disconnect()
  }, [options]) // 🚩 결과적으로, 의존성이 재 렌더링 때마다 다릅니다
  // ...
}

import { useState, useEffect } from 'react'
import { createConnection } from './chat.js'

const serverUrl = 'https://localhost:1234'

function ChatRoom({ roomId }) {
  const [message, setMessage] = useState('')

  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId,
    }
    const connection = createConnection(options)
    connection.connect()
    return () => connection.disconnect()
  }, [roomId])
  // ...
}

const id = useId()

useImperativeHandle(ref, createHandle, dependencies)

import { forwardRef } from 'react'

const MyInput = forwardRef(function MyInput(props, ref) {
  return <input {...props} ref={ref} />
})

import { forwardRef, useRef, useImperativeHandle } from 'react'

const MyInput = forwardRef(function MyInput(props, ref) {
  const inputRef = useRef(null)

  useImperativeHandle(
    ref,
    () => {
      return {
        focus() {
          inputRef.current.focus()
        },
        scrollIntoView() {
          inputRef.current.scrollIntoView()
        },
      }
    },
    []
  )

  return <input {...props} ref={inputRef} />
})

useInsertionEffect(setup, dependencies)

.success {
  color: green;
}

// CSS-in-JS 라이브러리 안에서
let isInserted = new Set()
function useCSS(rule) {
  useInsertionEffect(() => {
    // 앞서 설명했듯이 <style> 태그의 런타임 주입은 권장하지 않습니다.
    // 하지만 꼭 주입해야 한다면 useInsertionEffect에서 주입하는 것이 중요합니다.
    if (!isInserted.has(rule)) {
      isInserted.add(rule)
      document.head.appendChild(getStyleForRule(rule))
    }
  })
  return rule
}

function Button() {
  const className = useCSS('...')
  return <div className={className} />
}

useLayoutEffect(setup, dependencies)

const cachedValue = useMemo(calculateValue, dependencies)

import { useMemo } from 'react'

function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab])
  // ...
}

function TodoList({ todos, tab, theme }) {
  const visibleTodos = filterTodos(todos, tab)
  // ...
}

export default function TodoList({ todos, tab, theme }) {
  // ...
  return (
    <div className={theme}>
      <List items={visibleTodos} />
    </div>
  )
}

import { memo } from 'react'

const List = memo(function List({ items }) {
  // ...
})

export default function TodoList({ todos, tab, theme }) {
  // 테마가 변경될 때 마다 다른 배열이 표시됩니다.
  const visibleTodos = filterTodos(todos, tab)
  return (
    <div className={theme}>
      {/* ... List의 props는 동일하지 않으며 매번 다시 렌더링 됩니다. */}
      <List items={visibleTodos} />
    </div>
  )
}

export default function TodoList({ todos, tab, theme }) {
  // 재렌더링 사이에 계산을 캐싱하도록 React에 지시합니다...
  const visibleTodos = useMemo(
    () => filterTodos(todos, tab),
    [todos, tab] // ...따라서 해당 종속성이 변경되지 않는 한...
  )
  return (
    <div className={theme}>
      {/* ...List에 동일한 props가 전달되어 재렌더링을 생략할 수 있습니다. */}
      <List items={visibleTodos} />
    </div>
  )
}

function Dropdown({ allItems, text }) {
  const searchOptions = { matchMode: 'whole-word', text }

  const visibleItems = useMemo(() => {
    return searchItems(allItems, searchOptions)
  }, [allItems, searchOptions]) // 🚩 주의: 컴포넌트 본문에서 생성된 객체에 대한 종속성
  // ...
}

function Dropdown({ allItems, text }) {
  const searchOptions = useMemo(() => {
    return { matchMode: 'whole-word', text }
  }, [text]) // ✅ text가 변경될 때만 변경

  const visibleItems = useMemo(() => {
    return searchItems(allItems, searchOptions)
  }, [allItems, searchOptions]) // ✅ allItems이나 searchOptions이 변경될 때만 변경
  // ...
}

function Dropdown({ allItems, text }) {
  const visibleItems = useMemo(() => {
    const searchOptions = { matchMode: 'whole-word', text }
    return searchItems(allItems, searchOptions)
  }, [allItems, text]) // ✅ allItems이나 text가 변경될 때만 변경
  // ...
}

const [optimisticState, addOptimistic] = useOptimistic(state, updateFn)

import { useOptimistic } from 'react'

function AppContainer() {
  const [optimisticState, addOptimistic] = useOptimistic(
    state,
    // updateFn
    (currentState, optimisticValue) => {
      // merge and return new state
      // with optimistic value
    }
  )
}

const [state, dispatch] = useReducer(reducer, initialArg, init)

const [state, dispatch] = useReducer(reducer, { age: 42 })

function handleClick() {
  dispatch({ type: 'incremented_age' })
  // ...
}

function reducer(state, action) {
  switch (action.type) {
    case 'incremented_age': {
      return {
        name: state.name,
        age: state.age + 1,
      }
    }
    case 'changed_name': {
      return {
        name: action.nextName,
        age: state.age,
      }
    }
  }
  throw Error('Unknown action: ' + action.type)
}

function Form() {
  const [state, dispatch] = useReducer(reducer, { name: 'Taylor', age: 42 })

  function handleButtonClick() {
    dispatch({ type: 'incremented_age' })
  }

  function handleInputChange(e) {
    dispatch({
      type: 'changed_name',
      nextName: e.target.value,
    })
  }
  // ...
}

const ref = useRef(initialValue)

function handleStartClick() {
  const intervalId = setInterval(() => {
    // ...
  }, 1000)
  intervalRef.current = intervalId
}

import { useRef } from 'react'

function MyComponent() {
  const inputRef = useRef(null)
  // ...
  return <input ref={inputRef} />
}

function handleClick() {
  inputRef.current.focus()
}

function Video() {
  const playerRef = useRef(new VideoPlayer())
  // ...
}

function Video() {
  const playerRef = useRef(null)
  if (playerRef.current === null) {
    playerRef.current = new VideoPlayer()
  }
  // ...
}

const [state, setState] = useState(initialState)

const [name, setName] = useState('Edward')

function handleClick() {
  setName('Taylor')
  setAge((a) => a + 1)
  // ...
}

// bad
// 🚩 state 안에 있는 객체를 다음과 같이 변경하지 마세요.
form.firstName = 'Taylor'

// good
// ✅ 새로운 객체로 state를 교체합니다.
setForm({
  ...form,
  firstName: 'Taylor',
})

const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)

import { useSyncExternalStore } from 'react'
import { todosStore } from './todoStore.js'

function TodosApp() {
  const todos = useSyncExternalStore(
    todosStore.subscribe,
    todosStore.getSnapshot
  )
  // ...
}

const [isPending, startTransition] = useTransition()

function TabContainer() {
  const [isPending, startTransition] = useTransition()
  const [tab, setTab] = useState('about')

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab)
    })
  }
  // ...
}