Next.js React.js Tips

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

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

例 Firebase auth

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

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

import { useState } from 'react'

const [articles, setArticles] = useState([])

useEffect(async () => {
  if (auth.currentUser) {
    const data = await ArticleModel.get()
    setArticles(data)
  }
}, [auth.currentUser])

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

import { useState } from 'react'

let articles = []

useEffect(async () => {
  if (auth.currentUser) {
    articles = await ArticleModel.get()
  }
}, [auth.currentUser])