docs: use function for components in general

[huozhi]

Documentation / Examples

In general all docs use function to ensure it matches up with general recommendations (e.g. React docs).

• Make sure the linting passes by running yarn lint

[kachkaev]

👋 Folks, do you know the reason behind those recommendations? Just wonder if there is any public info on that – I could not find any.

const Home = () => {} is more compatible with TypeScript: const Home: NextPage = () => {}, which makes migration to TS easier.

Also if someone is a newcomer in JS, using arrow functions everywhere is simpler because there’s one less syntax construct to learn. Inline fns are inevitable anyway because they are used in React hooks.

I tried suggesting React folks to switch to const Component = () => {} in new docs, but I haven't heard any arguments against it. Maybe my comment was just lost amongst others: reactjs/react.dev#3308 (comment).