React - チートシート

import React, { useState } from 'react';

function ExampleWithManyStates() {
  // 複数のステートを宣言
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'テスト' }]);
  // ...
}

useEffect(() => {
 applyEffect(dependencies);
 return () => cleanupEffect();
}, [dependencies]);

useLayoutEffect(() => {
 applyBlockingEffect(dependencies);
 return cleanupEffect();
}, [dependencies]);

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

function Example() {
  const [count, setCount] = useState(0);

  // componentDidMount や componentDidUpdateと似ています
  useEffect(() => {
    //APIを使ってドキュメントタイトルを更新
    document.title = ` ${count} 回クリックしました`;
  });

  return (
    <div>
      <p> {count} 回クリックしました</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

副作用の処理（DOM操作、変数代入、API通信などUI構築以外の処理）を関数コンポーネントで扱うフック

function init(initialCount) {
  return {count: initialCount};
}

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    case 'reset':
      return init(action.payload);
    default:
      throw new Error();
  }
}

function Counter({initialCount}) {
  const [state, dispatch] = useReducer(reducer, initialCount, init);
  return (
    <>
      Count: {state.count}
      <button
        onClick={() => dispatch({type: 'reset', payload: initialCount})}>
        Reset
      </button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

状態管理のためのフック(useStateと似ている)

const ref = useRef();

import { useRef } from "react";
function TextInput() {
 const inputRef = useRef(null);
 const onBtnClick = () => inputRef.current.focus();
 return (
 <>
 <input ref={ref} />
 <button onClick={onBtnClick}>Focus the text input</button>
 </>
 )
}

要素への参照を行うフック

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

function RandomColoredLetter(props) {
 const [color, setColor] = useState('#fff')
 const [letter, setLetter] = useState('a')
 const handleColorChange = useCallback(() => setColor(randomColor()), []);
 const handleLetterChange = useCallback(() => setLetter(randomColor()), []);
 return (
 <div>
  <ColorPicker handleChange={handleColorChange} color={color} />
  <LetterPicker handleChange={handleLetterChange} letter={letter} />
  <hr />
  <h1 style={{color}}>{letter}</h1>
 </div>
 )
}

パフォーマンス向上のためのフックで、メモ化したコールバック関数を返します

const memoizedValue = useMemo(
 () => expensiveFn(dependencies),
 [dependencies]
);

function RandomColoredLetter(props) {
 const [color, setColor] = useState('#fff')
 const [letter, setLetter] = useState('a')
 const handleColorChange = useMemo(() => () => setColor(randomColor()), []);
 const handleLetterChange = useMemo(() => () => setLetter(randomColor()), []);
 return (
 <div>
 <ColorPicker handleChange={handleColorChange} color={color} />
 <LetterPicker handleChange={handleLetterChange} letter={letter} />
 <hr />
 <h1 style={{color}}>{letter}</h1>
 </div>
 )
}

関数の結果を保持するフック。結果が同じ場合の値などを保存(メモ化)し、そこから値を再取得

import { useState, useEffect } from 'react';

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}

function FriendStatus(props) {
  const isOnline = useFriendStatus(props.friend.id);

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}