PascalCase Component Names so they are distinct from regular HTML Tags.

const Card = (props) => (
  <div>
    {props.children}
  </div>
)

const MemberPage = () => {
  // code ...
 
  return (
    <Card>
      <div><h1>{member.name}</h1></div> 
    </Card>
  ) 
}

Components are PascalCased

 "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ]

Use React Plugin for ESLint

State is a powerful, but it can also cost you performance.

useState only for dynamic data.

Standards

Import usually are never added manually. Rather most the time you add them with your code editor without ever having to really think about them. As such usually it is not a good use to time and effort to put  too much effort into organizing them. Many code editors have a way for you to fold your imports so you only see the first import.

Organizing Imports

To make your code simple and easy to understand. Large / complex props should be separated from your HTML code.

const sx: SxProps = {
  flexShrink: 0,
  '& .MuiDrawer-paper': {
    width: '240px',
    boxSizing: 'border-box',
  },
  width: '240px',
  display: {xs: 'none', sm: 'flex'}
}

return (
  <Drawer sx={sx} />  
)

Large props should not be HTML inline

PropTypes or TypeScript allow you to validate data. This can help you catch errors early and make your code more maintainable. On large Projects defiantly consider TypeScript as it is the complete package. However it will take longer to get going.

import PropTypes from 'prop-types'

export const Profile = ({ name, age, authorized }) => {
  return (
    <>
      {authorized && (
        <p>{name} is {age + 3} years old</p>
       )}
    </>
  )
}

Profile.propTypes = {
    name: PropTypes.string,
    age: PropTypes.number,
    authorized: PropTypes.bool,
}

Use TypeScript or PropTypes

Best practices

const Counter() => {
    
  const [count, setCount] = useState(0);
  
  useEffect(() => {
  
    if(count > 10){
      setCount(0)
    }
  });
  
  const handleUpdate = ()=> {
    setCount (count + 1)
  }
    
  return (
    <div>  
      <div>I can only count to 10</div>
      <div>Count: {count}</div>
      <button onClick={ handleUpdate} >
        Click me
      </button>
    </div>
  );
}

useEffect

Here is a basic example of forwarding 'props' with a 'Dialog' that we want to make 'Draggable'. We are wrapping the 'Dialog' component with a 'Draggable' component that will make it able to drag to different position in the 'View Port'. We do not need to use any of the 'props' except 'label' in the wrapper so we just forward them all to the child component. 

export const DraggableDialog(props) => {
  const {labelId} = props
  nodeRef = React.useRef(null)

  return (
    <Draggable nodeRef={nodeRef} handle={`#${labelId}`} >
      <Dialog ref={nodeRef} {...props} />
    </Draggable>
  )
}

This is a more advanced example where we are forwarding a group of props that we are getting from a formik object, that uses a function to get a specific group of props.

 const {errors, touched, handleSubmit, getFieldProps, isSubmitting, isValid} = formik
 
  <TextField fullWidth size="small" type="text" label="Verification Code"
    {...getFieldProps("code")} error={Boolean(touched && errors.code)}
    helperText={touched && errors.code} />

Forward Props in Groups

The useContext hook is very effective for passing down state and updating state as well.

export const MemberContext = createContext({})

export const HomePage = () => {
  const initMember = () => {
    // api call
  }
  
  const [member, setMember] = useState<Member>(initMember())
  
  return (
    <MemberContext.Provider value={{member, setMember}}>
      <AppBar  />            
    </MemberContext.Provider>
  )
}
 
export const AppBar = () => {
  const {member, setMember} = useContext(MemberContext)
  
  const {showAvatarForm, setShowAvatarForm} useState(false)
  
  const updateMemberAvatar = () => {
    // api call
  }
  
  const updateAvatar = () => {
    // api call 
    .then((res) => {
      setMember(res.data)
    })
  }

  return (
    <>
      // ui-code 
      <Avatar img={member.avatar} onClick={()=> setShowAvatarForm(true)} />
      {
        showAvatarForm && (
          <Form onSubmit=(() => updateAvatar()) >
            // form code
          </Form>
        )
      }
    <>
  )
} 



useContext

Here is an example of custom Hook that logs Member Activity.

export interface NewActivity {
  title: string
  description?: string
}

export interface Activity extends NewActivity {
  id: number
  createdAt: Date
}

const useMemberActivities = (): [activities: Activity[], (a: NewActivity) => void] => {
  const [activities, setActivity] = useState<Activity[]>([])
  const [id, setId] = useState<number>(0)

  const {enqueueSnackbar} = useSnackbar()

  const addActivity = (newActivity: NewActivity) => {
    setId(id + 1)

    const activity = {...newActivity, id, createdAt: new Date()}

    setActivity([activity, ...activities])
  }

  useEffect(() => {
    if (activities.length > 0) {
      const newActivity = activities[0]
      enqueueSnackbar(newActivity.title, {variant: 'success'})
    }
  }, [activities, enqueueSnackbar])

  return [activities, (a: NewActivity) => addActivity(a)]
}
export default useMemberActivity


const Settings = () => {

  const [activities, setActivities] = useMemberActivity()
  
  const handleUpdateMode = (mode: string) => {
    updateTheme({mode: mode.toLowerCase()})
    setActivities({title: `${mode} Mode`, description: 'Theme Mode Changed'})   
  }
}

Custom Hook : Member Activity Log

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    
  ) 
}

useReducer

Examples

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