こんにちは！お盆もJS！Mizutani(@sirycity)です。悲しいとか言わないで

今日はReactでよく出てくるuseEffectについてです。

useEffectとは

useEffectとは...副作用を扱うhooksです。(ﾟДﾟ)ﾊｧ?

まあ簡単に言うとReactはこの世の全てを副作用の無い関数型にしたいけどJSの仕様的に全て関数型にすんの無理だしどうしても副作用出ちゃうからその部分を切り離して扱う機能みたいな感じ。

...って言われてもわかんないですよね。僕もです。今回はuseEffect自体の解説じゃないし(苦しい言い訳)もっと詳しい解説記事をググりましょう。

useEffectを使うとき

こんな感じで書きます。

const Foo = () => (
  useEffect(() => {
    console.log('こんにちは！')
  }, [])

  return (
    <div>こんにちは！</div>
  )
)

これ実行したらこんにちは！ってきます。そんだけ。

useEffectが長くなってくると...

useEffectは複数書けます。あと中身が長くなっても大丈夫。

const Foo = () => (
  useEffect(() => {
    console.log('おはよう！')
  }, [])
  useEffect(() => {
    console.log('こんにちは！')
  }, [])
  useEffect(() => {
    console.log('こんばんは！')
    console.log('こんばんは！')
    console.log('こんばんは！')
  }, [])

  return (
    <div>こんにちは！</div>
  )
)

まあuseEffectが大きくなりすぎるのはあんまり良くないんだけどね。

useEffectの制限

useEffectに限らず長いコード書いてると分割したくなりませんか？僕はなります。

ところがuseEffectはコンポーネントの外には書けないという制限があるわけです。だからこういうのはむり。

useEffect(() => {
  console.log('これはむり！')
}, [])

const Foo = () => (
  return (
    <div>こんにちは！</div>
  )
)

まあそりゃそうだ。

でも分割したい...外部のファイルに切り分けたい...そんな悩みを解決するのがこれ！

useEffectを分割

別にそんな難しくないんだけどまずはこんな感じでuseEffectの中身だけのファイルと関数作って、

export const hello = () => {
  useEffect(() => {
    console.log('これは別ファイル！')
  }, [])
}

それを読み込むだけ。こんだけ。

import { hello } from './hello.js'

const Foo = () => (
  hello()

  return (
    <div>こんにちは！</div>
  )
)

おしまい。

さいごに

書いといてなんですがもう一度言っとくとuseEffectはなるべく小さく！↑みたいな書き方すればいくらでも書けちゃうけどね。以上。