Stack

React

Function Components

We only use FC type when we need to pass and extract children from props ¹. Otherwise, we use the function declaration. Refer here  for a more extensive section explaining why React.FC should mostly be avoided.

// Avoid
interface Props {
  text?: string;
}
const Heading: React.FC<Props> = ({ text = 'Hello, world!' }) => {
  return <h1>{text}</h1>;
};

// Prefer
interface Props {
  text?: string;
}
function Heading({text = 'Hello, world!'}: Props) {
  return <h1>{text}</h1>;
}

Coding Patterns

let vs const

https://overreacted.io/on-let-vs-const/ 

Copy/paste is better than the wrong abstraction ².

UI/UX Design

Hover Effects in Anchor Tags

When designing hover effects for anchor tags, we use the following classes to style the anchor tags:

className="text-orange-yellow-crayola underline hover:text-opacity-70 hover:decoration-light-gray-70"

Footnotes