【Next.js】Stateのリフトアップとは？使い方と注意点

複数のコンポーネントで同じStateを共有する場合、Stateのリフトアップが必要になります。この記事では、Next.jsでStateのリフトアップを行う方法と注意点について解説します。

Stateのリフトアップとは？

Stateのリフトアップとは、コンポーネント間で共有される状態を親コンポーネントに持ち上げることを指します。これにより、複数のコンポーネントで同じ状態を共有できるようになります。具体的には、Stateを持つ子コンポーネントがあり、そのStateを親コンポーネントや他の子コンポーネントでも使用する場合、Stateをリフトアップすることで、そのStateを共有できるようになります。

リフトアップの方法

Next.jsでは、StateのリフトアップにはReactと同様にPropsを利用します。Stateを持つ子コンポーネントからStateを参照するためのPropsを定義し、親コンポーネントでそのStateを管理することで、子コンポーネントからもStateを利用できるようになります。また、Stateを更新するための関数もPropsを利用して子コンポーネントから呼び出すことができます。

例えば、以下のような子コンポーネントがあるとします。

ChildComponent.jsx

import React, { useState } from 'react';

const ChildComponent = () => {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  }

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </>
  )
}

この場合、Stateのcountとその更新関数setCountを親コンポーネントにリフトアップすることができます。

ParentComponent.jsx

import React, { useState } from 'react';

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  }

  return (
    <>
      <p>Count: {count}</p>
      <ChildComponent count={count} onIncrement={handleIncrement} />
    </>
  )
}

const ChildComponent = ({ count, onIncrement }) => {
  return (
    <>
      <p>Count: {count}</p>
      <button onClick={onIncrement}>Increment</button>
    </>
  )
}

このようにすることで、親コンポーネントでStateを管理することで、子コンポーネントでもStateを参照し、更新することができるようになります。

注意点

Stateのリフトアップは、コンポーネント間でデータを共有する際に便利な手法の一つですが、以下のような注意点があります。

1. 過度なStateのリフトアップはコードを複雑化させます。
2. グローバルなStateの管理は慎重に行う必要があります。
3. Stateのリフトアップを行うと、コンポーネントの再レンダリングが発生する可能性があるため、パフォーマンスに影響を与えることがあります。

まとめ

Next.jsでStateのリフトアップを行うことで、複数のコンポーネントで同じStateを共有できるようになります。StateのリフトアップにはPropsを利用します。適切に利用することで、コードの複雑化を防ぎ、アプリケーションのパフォーマンスを維持しながらグローバルな状態管理ができます。