【JS】useEffectを他ファイルに分割したい
こんにちは!お盆も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の中身だけのファイルと関数作って、
hello.js
export const hello = () => {
useEffect(() => {
console.log('これは別ファイル!')
}, [])
}
それを読み込むだけ。こんだけ。
import { hello } from './hello.js'
const Foo = () => (
hello()
return (
<div>こんにちは!</div>
)
)
おしまい。
さいごに
書いといてなんですがもう一度言っとくとuseEffectはなるべく小さく!↑みたいな書き方すればいくらでも書けちゃうけどね。以上。
PREV
2022-07-10
Jamboardを半年使って気付いた点いろいろ
NEXT
2022-08-23
Google ChatはPC版アプリで複数アカウント運用できない
LINK
リンク
Twitter
GitHub
TAGS
タグ
LATESTS
最新の記事
POPULAR
人気の記事
- CSS2021/04/29【CSS】右寄せの方法は結局flexが一番良さそう
- React2020/07/13【JS】Reactのstyleの使い方、書き方いろいろ
- Payment2021/10/16GooglePayでVisaタッチを使う時に知っておきたい過酷な現実【追記あり】
- Others2021/07/11Slackに予約投稿機能ができて嬉しいけどそれでもまだ少し不満な理由【追記あり】
- CSS2020/04/30【CSS】tailwind.cssでよく使うデザインパターン
- CSS2019/03/30【CSS】100vhは「一画面」ではないという罠
- CSS2020/06/09【CSS】max-font-sizeやmin-font-sizeを使いたくなったら
- Vue2019/06/29【JS】Vueの:classの書き方3通り
- JavaScript2020/09/02【JS】yarnの長所とyarnからnpmに戻ってきた理由
- React2020/06/04【JS】ReactのclassNameの色々な書き方紹介