2日目: useEffectとuseContextの使い方を学ぶ

useEffectの基礎

useEffectはReactコンポーネントがレンダリングされた後に何かを行いたいときに使用します。主に、データのフェッチ、購読の設定、手動でのDOMの更新など、副作用を含む操作に用います。

        import React, { useEffect } from 'react';
function ExampleComponent() {
  useEffect(() => {
    console.log('Componentがレンダリングされた後にこれが実行されます。');
  });
  return <h1>Hello, world!</h1>;
}

useContextの活用方法

useContextはReactのコンテキストAPIをより簡単に利用するためのフックです。これを用いることで、コンポーネントツリーを通してデータを効果的に渡すことができ、プロップドリリングの問題を解消できます。

        import React, { useContext, createContext } from 'react';
const MyContext = createContext();
function ExampleComponent() {
  const value = useContext(MyContext);
  return <div>{value}</div>;
}
function App() {
  return (
    <MyContext.Provider value='Contextからの値'>
      <ExampleComponent />
    </MyContext.Provider>
  );
}