Discussion on: React Style Guide

[Lawson]

Well, I am also using that way. But usually it looks like :

constructor -> hooks (useEffect, useCallBack... ) -> other functions

// constructor
const [foo, setFoo] = useState(null)
const pathname = 'home'

// life cycles ( hooks ), others function ( such as event handlers,... )
const handleFoo = (bar) => {
    if (bar === 'something')  {
      setFoo(bar)
    }
  }

 useEffect = () => {
   console.log(`Hello ${foo}`)
 }, [foo]

// renders
return (
    <div className="wrapper">
     {/* show stuff... */}
    </div>
 )

I think if you're comfortable with that approach, keep it :)

You can get more info : React Ordering