悩まないための React Coding Styles

悩まないための React Coding Styles

React imports

tsx
import React from 'react'; React.useState(); // ❌ import { useState } from 'react'; useState(); // 👍

Default exports vs Named Exports

components

※ page components は、default export で記載する。

tsx
export default function Components() {} // ❌ export function Components() {} // 👍

Pros Cons

TODO

Redux と Redux Toolkit

  • modules/account.tsmodules/post.tsなどで統一する。
  • storeはさらに上の階層に配置するか、同じ階層でstore.tsを作成する。

Provider

ContextValueでモーダルなどの開閉をする場合、安易にuseEffectなどを使用しないように注意する。 複数箇所でモーダルなどを使用していた場合、予期せぬ挙動になる