- imports
- Single use utilities [should refactor]
- CSS [We have Chakra, limit use]
- Component body
- Possible stateless subcomponent
- Export statement

- React imports
- Third party package imports
(space)
- react contexts
- react components (includes pages)
- js services
- js utilities
(space)
- React.lazy dynamic imports

import React, { useEffect, useState, lazy, Suspense } from "react";
import { Switch, Route, useParams } from "react-router-dom";
 
import { useDao } from "../contexts/DaoContext";
import Dao from "../pages/Dao";
import Layout from "../components/layout";
import Modal from "../components/modal";
import { MolochService } from "../services/MolochService";
import { convertTimeUnits } from "../utils/Time";
 
const HeavySubPage = lazy(() => import("../pages/HeavySubPage"));

- Function declaration w/ props
- destructure contexts
- destructure props
(space)
- useState
- useRef
- simple expressions
(space)
- useEffect/useMemo
(space)
- Functions/useCallback
(space)
- Return statement (JSX)

/// FUNCTION DECLARATION
const Component = ({ bigProps }) => {
  //  DEPENDENCY DECLARATIONS
  const { address, injectedProvider } = useInjectedProvider();
  const { errorToast } = useOverlayContext();
  //  Don't have to destructure props, just an example of placement
  const { smallProp, anotherSmallProps } = bigProps;
 
  /// STATE DECLARATIONS
  const [state, setState] = useState(null);
  const [loading, setLoading] = useState(false);
  const ref = useRef(null);
  const isTrue = smallProp ? "yes" : "no";
 
  //  SIDE EFFECTS
  useEffect(() => {
    const painInTheAssAsyncFn = async (address) => {
      setLoading(true);
      try {
        const sumthin = await fetchSumthin(address);
        setState(sumthin);
      } catch (error) {
        console.error(error);
        errorToast({
          title: "Didn't Work",
          description: "It didn't work, ok?",
        });
        setState(null);
      } finally {
        setLoading(false);
      }
    };
    if (!state && address) {
      painInTheAssAsyncFn(address);
    }
  }, [state, address]);
};
 
//  FUNCTIONS
const handleClick = () => {
  setState(false);
};
 
//  OUTPUT
return (
  <div>
    <h1>Hey!</h1>
    <button onClick={handleClick}>Click this!</button>
  </div>
);