deve.K

エンジニアが未来を切り開く。

English

React Hook useCallback 基礎


スポンサーリンク

react画像

本日はReact Hookの『useCollback』について理解を深めてもらいたく初学様に向けて解説していきます。

事前として、当ブログのこの記事では『React Hook』である『useState』と 『useEffect』の理解をしており精通している事を前提とした解説となりますのでご了承下さい。

useCallbackとは

『useCallback』フックのReactドキュメントによると、フック自体は次の通りに記述されています。

『メモ化されたコールバックを返し

インラインコールバックと依存関係の配列を渡します。

useCallback依存関係の1つが変更された場合にのみ変更され

メモ化されたバージョンのコールバックを返します。』

以上がドキュメントによる解説です。

これは、不要なレンダリングを防ぐために参照の同等に依存する最適化された、子のコンポーネントにコールバックを渡すときに役立ちます。

つまりざっくり言ってしまえば

『不要な再レンダリングを防ぐ方法をあなたに提供致します』と言う事です。

それでは今回は、以前当ブログでご紹介した『useEffect』によるfetchでAPIを取得し表示する方法を紹介しました。その記事をそのまま使用し

コンポーネントの状態に割り当て『useCallback』で書き直してみましょう。

『useEffct』フックに精通されてない方はこちらで学んで下さい。

dev-k.hatenablog.com

まずは以前のコードの確認をお願いします。

useEffctのみのコード

import { useEffect, useState } from 'react';

const App = () => {

const [posts, setPosts] = useState([])

useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')

    .then(res => res.json())
    .then(data => {setPosts(data)
    })
  },[])

  const usePosts = posts.map((post)=>{
 return <div>
 <li>{post.id}</li>
 <li>{post.title}</li>
</div> 
    })

  return (
   <div>
     <ul>
     {usePosts}
    </ul>
   </div>
    );
  }
export default App;

これを、『useCallback』で書き直します。

useCallbackで書き直し

import React, { useCallback } from 'react';
import { useEffect, useState } from 'react';

const App = () => {

  const [posts, setPosts] = useState([])

//修正点
const fetchPosts =
useCallback(() => { 

    fetch('https://jsonplaceholder.typicode.com/posts')
    .then(res => res.json())
    .then(data => {setPosts(data)
    })

  },[setPosts])

//修正点
useEffect(() => {
fetchPosts()
  },[fetchPosts])

  const usePosts = posts.map((post)=>{
    return <div>
 <li>{post.id}</li>
 <li>{post.title}</li>
              </div> 
    })

  return (
   <div>
     <ul>
     {usePosts}
    </ul>
   </div>
    );
  }


export default App;

もちろんですがブラウザでの表示は変わりません。

DEMO

1
sunt aut facere repellat provident occaecati excepturi optio reprehenderit
2
qui est esse
3
ea molestias quasi exercitationem repellat qui ipsa sit aut
4
eum et est occaecati
5
nesciunt quas odio

//(続く)省略

では一体何が起きているのか

例えば『useCallback()』を使用しない場合

const fetchPosts =() => {

  const [posts, setPosts] = useState([])

    fetch('https://jsonplaceholder.typicode.com/posts')
    .then(res => res.json())
    .then(data => {setPosts(data)
    })

  }

useEffect(() => {
fetchPosts()
  },[])

}

export default fetchPosts;

この場合、無数の再レンダリングを回避するために依存関係配列を含め実際には再レンダリングを防ぐために機能致しますが、Reactはエラーをスローします。

ReactHook 『useEffect』には依存関係がありません

ですがこの『useCallback』を使用しない場合だと『fetchPosts』が『useEffect』フックに必要な依存関係であることを意味致します。

それを依存関係配列に含めると、再レンダリングによりるサイクルが繰り返されていく事になります。

それを『fetchPosts』内で『useCallback』を呼び出し実行してあげます。

const fetchPosts =

useCallback(() => {

}

こうする事で『useEffect』フックがしっかりと機能するため

機能コンポーネントは、マウント時に過度に再レンダリングしたりエラーをスローしたりすることはなく

データをフェッチしてくれます。

これで前回のコードを修正した調整は以上となります。

この記事で貴方の役に立って頂ければ幸いでございます。

プライバシーポリシー