【React】state を使ってみる ~ React Hooks/useEffect ~

はじめに

React を習得するまでの軌跡をメモっていく備忘録的な記事です。

state を使って１秒毎にカウントアップするタイマーを作る

index.js

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

const Timer = () => {
  const [time, setTime] = useState(0);

  // クリーンアップ関数を登録（return）する
  useEffect(() => {
    const timerId = setInterval(() => setTime(time + 1), 1000);
    return () => clearInterval(timerId);
  });

  return(
    <p>
      {time}
    </p>
  )
};

ReactDOM.render(
    <Timer />,
  document.getElementById('root')
);

まとめ

import React, { useEffect } from 'react';を書くとuseEffectが使えるようになる。