Next.js React.js Tips

ツイート
2021年08月04日
2021年08月05日

Next.jsの中で使うReact.jsの記法やよく使う方法をまとめていきます。

値の変更を検知して実行する

例 Firebase auth

js
import { auth } from '@/lib/firebase.js' useEffect(async () => { if (auth.currentUser) { // 処理 } }, [auth.currentUser])

reactjs - Detecting Firebase user change with useEffect vs onAuthStateChanged - what's the difference? - Stack Overflow

値があれば表示する値がなければ表示しない

reactjs - React Redux Store updating, but component not re-rendering - Stack Overflow

js
function Index () { const boardList = () => { return items.length < 1 ? null : items && <div> {items.map((item) => <div key={item.id}> {item.name} </div> )} </div> } return ( <> {boardList()} </> ) } export default Index

Valueの変更を検知してDOM変更

React Hooksを使用する。

Introducing Hooks – React

js
import { useState } from 'react' const [articles, setArticles] = useState([]) useEffect(async () => { if (auth.currentUser) { const data = await ArticleModel.get() setArticles(data) } }, [auth.currentUser])

以下だと検知してくれません。

js
import { useState } from 'react' let articles = [] useEffect(async () => { if (auth.currentUser) { articles = await ArticleModel.get() } }, [auth.currentUser])