副作用と環境は分離する

副作用のプログラムを実装する際はどこで実行されるかの環境を意識してはならない

副作用のメイン処理をベタ書きしないで関数化すべしということ

bad

code:tsx

function ChatRoom({ roomId }) {

useEffect(() => {

const connection = createConnection(serverUrl, roomId);

connection.connect();

return () => {

connection.disconnect();

};

// ...

}

good

code:tsx

// どう実行されても冪等にできるように、副作用の関数はコンポーネントと分離して考える

const createConnection = (serverUrl = serverUrl, roomId) => {

const connection = /*~*/

/* connection実行 */

const disconnect = /*~*/

return disconnect

}

function ChatRoom({ roomId }) {

useEffect(()=> createConnection, roomId)

/*~*/

}