useRef()の説明, useContext()の使用例

useRef()

再レンダリングなしでデータを変更することができる。useRefで作成した配列は、.currentが変更されても、再レンダリングはおきない。

• .current プロパティに格納されたデータを変更できる
• .current 以外のデータは変更できない(.current 以外のプロパティやメソッドを持たない)

useContext()使用例

import React, { createContext, useContext } from 'react';

const CreateContext = createContext();

const Test = () => {
  const value1 = '値1';
  const value2 = '値2';

  return (
    <CreateContext.Provider value={{ value1, value2 }}>
      <ChildComponent />
    </CreateContext.Provider>
  );
};

const ChildComponent = () => {
  // useContext フックを使用してコンテキストの値にアクセス
  const { value1, value2 } = useContext(CreateContext);

  return (
    <div>
      <div>{value1}</div>
      <div>{value2}</div>
    </div>
  );
};

export default Test;