Datadogのモニター分けた NodeJSバージョンアップした イベント発火とstate更新順 loading処理の難しさ フロントエンド定例 2022/7/15

@view.url_details.path:\/[対処のURLのパス]\/*

const useHooks = () => {
  const [ text, setText ] = useState('')

  const onClick = useCallback(() => {
    setText('Hello')

    fetch(
      'htttps://~~~',
      {
         headers: {
           'content-type': 'application/json',
         },
         data: JSON.stringfy({
           // 初回のonClick起動のとき'Hello'ではなく''になる
           text
         });
      }
    );
  }, [ text ])

  return {
    onClick
  }
}

const Component = () => {
  const { onClick } = useHooks();

  return (
    <button type="button" onClick={onClick}>ボタン</button>
  )
}

const useHooks = () => {
  const [ text, setText ] = useState('')

  const onMouseDown = useCallback(() => {
    setText('Hello')
  }, [ text ])
  const onClick = useCallback(() => {
    fetch(
      'htttps://~~~',
      {
         headers: {
           'content-type': 'application/json',
         },
         data: JSON.stringfy({
           // ちゃんと'Hello'として送信される
           text
         });
      }
    );
  }, [ text ])

  return {
    onMouseDown,
    onClick
  }
}

const Component = () => {
  const { onMouseDown, onClick } = useHooks();

  return (
    <button type="button" onMouseDown={onMouseDown} onClick={onClick}>ボタン</button>
  )
}

const Component = () => {
  const [loading, setLoading] = useState(false)
  const onClick = useCallback{async() => {
    if (!loading) {
      setLoading(true)
      await fetch(...)
      setLoading(false)
    }
  }, [loading])

  return (
    <button type="button" onClick={onClick}>ボタン</button>
  )
}