Components are PascalCased

Use React Plugin for ESLint

useState only for dynamic data.

Standards

Organizing Imports

Large props should not be HTML inline

Use TypeScript or PropTypes

Best practices

useEffect

Forward Props in Groups

useContext

Custom Hook : Member Activity Log

useReducer

Examples

React is a JavaScript Library and Framework. Here you will find Standards, Best Practices, and Examples for React.

React

Here is an example of useReducer that keeps track of what dialogs should be open and closed.

enum AppActions {
  SetSettingsDialogIsOpen = "SetSettingsDialogIsOpen",
  SetAuthDialogIsOpen = "SetAuthDialogIsOpen",
  SetRegDialogIsOpen = "SetRegDialogIsOpen",
  SetForgotDialogIsOpen = "SetForgotDialogIsOpen",
}

export interface AppState{
  settingsDialogIsOpen: boolean,
  authDialogIsOpen: boolean,
  regDialogIsOpen: boolean,
  forgotDialogIsOpen: boolean,
}
export interface AppAction{
  type: AppActions,
  payload: boolean
}

export const reducer = (state: AppState, action: AppAction): AppState => {
  switch (action.type) {
  case AppActions.SetSettingsDialogIsOpen:
    return { ...state, settingsDialogIsOpen: action.payload }
  case AppActions.SetAuthDialogIsOpen:
    return { ...state, authDialogIsOpen: action.payload }
  case AppActions.SetRegDialogIsOpen:
    return { ...state, regDialogIsOpen: action.payload }
  case AppActions.SetForgotDialogIsOpen:
    return { ...state, forgotDialogIsOpen: action.payload }
  default:
    return state
  }
}

const App = () => {

  const [state, dispatch] = useReducer(reducer,
    {settingsDialogIsOpen: false, authDialogIsOpen: false, regDialogIsOpen: false,
      forgotDialogIsOpen: false})
      
  return (
    // ...code
    <AuthNav
      setAuthDialogIsOpen={(payload) =>
        dispatch({type: AppActions.SetAuthDialogIsOpen, payload}) } 
    />      
    <AuthDialog dialogIsOpen={state.authDialogIsOpen}
      closeDialog={() => dispatch({ type: AppActions.SetAuthDialogIsOpen, payload: false}) }
      openRegDialog={() => dispatch({ type: AppActions.SetRegDialogIsOpen, payload: true}) }
      openForgotDialog={() => dispatch({type: AppActions.SetForgotDialogIsOpen, payload: true})} 
    />
    // ...code    
  ) 
}

React : Examples useReducer

React : Examples
useReducer