refact: prefer function over lambdas

src/components/Container/index.tsx

@@ -1,11 +1,11 @@
 import React, { PropsWithChildren } from "react"
 import * as SC from "./styles"
 
-const Container = ({
+function Container({
   children,
   ...restProps
-}: PropsWithChildren<{}>): JSX.Element => (
+}: PropsWithChildren<{}>): JSX.Element {
-  <SC.ContainerWrapper {...restProps}>{children}</SC.ContainerWrapper>
+  return <SC.ContainerWrapper {...restProps}>{children}</SC.ContainerWrapper>
-)
+}
 
 export default Container

src/components/DocsLayout/index.tsx

@@ -12,7 +12,7 @@ import DocsSidebar from "../DocsSidebar"
 import Footer from "../Footer"
 import * as SC from "./styles"
 
-const DocsLayout = ({ children }: PropsWithChildren<{}>) => {
+function DocsLayout({ children }: PropsWithChildren<{}>) {
   const data = useStaticQuery(graphql`
     query {
       site {

src/components/DocsSidebar/index.tsx

@@ -55,7 +55,7 @@ const ALL_DOCS = graphql`
   }
 `
 
-const plantTree = (item: IFileOrFolder) => {
+function plantTree(item: IFileOrFolder) {
   if (item.type === "file") {
     return (
       <SC.PageLink to={item.path} activeClassName="active">
@@ -84,7 +84,7 @@ function Folder({ item }: { item: IFolder }) {
   )
 }
 
-const DocsSidebar = () => {
+function DocsSidebar() {
   const docs = useStaticQuery<IAllDocsQuery>(ALL_DOCS)
   const tree = useBuildTree(docs)
 

src/components/DocsSidebar/useBuildTree.tsx

@@ -7,10 +7,10 @@ import {
   IFileQuery,
 } from "./index"
 
-const traverse = (
+function traverse(
   [head, ...tail]: string[],
   basePath = "/docs"
-): IFileOrFolder => {
+): IFileOrFolder {
   const path = basePath + "/" + head
   const isFile = !tail.length
   if (isFile) {
@@ -30,7 +30,7 @@ const traverse = (
   }
 }
 
-const generateFolder = ({
+function generateFolder({
   title,
   path,
   targets,
@@ -38,7 +38,7 @@ const generateFolder = ({
   title: IFolder["title"]
   path: IFile["path"]
   targets: IFolder[]
-}): IFolder => {
+}): IFolder {
   const children = join(R.chain(target => target.children, targets))
 
   return {
@@ -49,13 +49,13 @@ const generateFolder = ({
   }
 }
 
-const generateFile = ({
+function generateFile({
   title,
   path,
 }: {
   title: IFile["title"]
   path: IFile["path"]
-}): IFile => {
+}): IFile {
   return {
     title,
     path,
@@ -63,7 +63,7 @@ const generateFile = ({
   }
 }
 
-const join = ([head, ...tail]: IFileOrFolder[]): IFileOrFolder[] => {
+function join([head, ...tail]: IFileOrFolder[]): IFileOrFolder[] {
   if (!head) return []
 
   const [similarFs, remaining] = R.partition(

src/components/DocsSidebarSection/index.tsx

@@ -5,10 +5,10 @@ export interface DocsSidebarSectionProps {
   readonly title: string
 }
 
-const DocsSidebarSection = ({
+function DocsSidebarSection({
   title,
   children,
-}: PropsWithChildren<DocsSidebarSectionProps>) => {
+}: PropsWithChildren<DocsSidebarSectionProps>) {
   return (
     <div>
       <SC.SidebarTitle>{title}</SC.SidebarTitle>

src/components/Footer/index.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import * as SC from "./styles"
 import Container from "../Container"
 
-const Footer = () => {
+function Footer() {
   return (
     <SC.FooterWrapper>
       <Container>

src/components/Layout/index.tsx

@@ -16,7 +16,7 @@ import * as SC from "./styles"
 import Scrollbar from "react-perfect-scrollbar"
 import "react-perfect-scrollbar/dist/css/styles.css"
 
-const Layout = ({ children }: PropsWithChildren<{}>) => {
+function Layout({ children }: PropsWithChildren<{}>) {
   const data = useStaticQuery(graphql`
     query {
       site {

src/components/SEO/index.tsx

@@ -10,13 +10,13 @@ interface SEOProps {
   readonly title: string
 }
 
-const SEO = ({
+function SEO({
   description,
   lang = "en",
   meta = [],
   keywords = [],
   title,
-}: SEOProps) => {
+}: SEOProps) {
   const { site } = useStaticQuery(
     graphql`
       query {

src/components/Sidebar/index.tsx

@@ -11,7 +11,7 @@ function MenuItem({ children, to }: PropsWithChildren<{ to: string }>) {
   )
 }
 
-const Sidebar = () => {
+function Sidebar() {
   return (
     <SC.SidebarWrapper>
       <SC.Logo src={logo} />

src/pages/404.tsx

@@ -3,12 +3,14 @@ import React from "react"
 import Layout from "../components/Layout"
 import SEO from "../components/SEO"
 
-const NotFoundPage = () => (
+function NotFoundPage() {
-  <Layout>
+  return (
-    <SEO title="404: Not found" />
+    <Layout>
-    <h1>NOT FOUND</h1>
+      <SEO title="404: Not found" />
-    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
+      <h1>NOT FOUND</h1>
-  </Layout>
+      <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
-)
+    </Layout>
+  )
+}
 
 export default NotFoundPage

src/pages/docs.tsx

@@ -3,11 +3,13 @@ import React from "react"
 import DocsLayout from "../components/DocsLayout"
 import SEO from "../components/SEO"
 
-const DocsPage = () => (
+function DocsPage() {
-  <DocsLayout>
+  return (
-    <SEO title="Docs" />
+    <DocsLayout>
-    the docs
+      <SEO title="Docs" />
-  </DocsLayout>
+      the docs
-)
+    </DocsLayout>
+  )
+}
 
 export default DocsPage

src/pages/index.tsx

@@ -4,15 +4,17 @@ import { Link } from "gatsby"
 import Layout from "../components/Layout"
 import SEO from "../components/SEO"
 
-const IndexPage = () => (
+function IndexPage() {
-  <Layout>
+  return (
-    <SEO title="Home" />
+    <Layout>
-    <h1>Hi people</h1>
+      <SEO title="Home" />
-    <p>Welcome to your new Gatsby site.</p>
+      <h1>Hi people</h1>
-    <p>Now go build something great.</p>
+      <p>Welcome to your new Gatsby site.</p>
-    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}></div>
+      <p>Now go build something great.</p>
-    <Link to="/page-2/">Go to page 2</Link>
+      <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}></div>
-  </Layout>
+      <Link to="/page-2/">Go to page 2</Link>
-)
+    </Layout>
+  )
+}
 
 export default IndexPage

src/templates/languagePost.tsx

@@ -4,7 +4,7 @@ import SEO from "../components/SEO"
 import DocsLayout from "../components/DocsLayout"
 
 // @todo maybe find alternative type for data
-const LanguagePost = ({ data }: any) => {
+function LanguagePost({ data }: any) {
   const { html, frontmatter } = data.file.post
   console.log(data)
   return (