K3ndev

React-router-dom v6

Installation

• npm install react-router-dom

Basics

import React from "react";
import { Link } from "react-router-dom";

K3ndev

useReducer and useContext are two hooks that are provided by React to handle state management in more complex applications. They are often used together to manage global state in a React application.

useReducer is a hook that allows you to manage state using a reducer function, similar to the way you might use switch statements to manage state in a traditional setState approach. The useReducer hook takes two arguments: a reducer function that takes in the current state and an action object and returns the new state, and an initial state object.

Here's an example:

import React, { useReducer } from 'react';

const initialState = { count: 0 };

K3ndev

Asynchronous Code

• JavaScript supports asynchronous code execution through the use of callbacks, promises, and async/await syntax. Asynchronous code is used when we have to perform time-consuming operations, such as network requests or file I/O, without blocking the main thread of execution.

Promises (Old Way)

• Promises are a way to handle asynchronous code that returns a value or an error. A promise is an object that represents the eventual completion (or failure) of an asynchronous operation.

function fetchData() {
  return new Promise((resolve, reject) => {
    // Make an asynchronous network request
 fetch("https://api.example.com/data")

K3ndev

SOLID Principles in React

• takes notes that using typescript is mandatory

1. Single Responsibility Principle (SRP)

• components should have a single responsibility

// Example of a component that follows SRP
function UserAvatar(props) {
  const { user } = props;
 return ;

K3ndev

Deep clone

• Deep cloning is the process of creating a copy of an object where the copied properties have their own, separate references in memory from the original object.
• Standard built-in object-copy operations in JavaScript (such as spread syntax, Array.prototype.slice(), and Object.assign()) create shallow copies, not deep copies.
• To create a deep copy of a JavaScript object, you can use either JSON.stringify() and JSON.parse() or the structuredClone() method.

const originalObj = { a: 1, b: { c: 2 } };

// Create a deep copy of the object using JSON.stringify() and JSON.parse()
const clonedObj = JSON.parse(JSON.stringify(originalObj));

K3ndev

useEffect Guide

• using useEffect as state setter is a footgun
• useEffect was always meant for synchronization
  • the user interface always reflects the current state of the application
  • sample: updating the DOM, fetching data from an API, animations
• useEffect should always have dependencies or [ ], and do some cleanup if you think its necessasry

Where do effects go?

• it should be isolate in different file not in a component

K3ndev

Functional programming

What is functional programming?

• its a programming paradigm
• safer/ easy to maintain

Rules

• Do everything with funcions
• A function should have one responsibility
• A function probably needs a guard clause
  • A conditional statement that is used at the beginning of a function to check for invalid input or unexpected conditions.

K3ndev

sevices

• auth0
• clerk
• firebase
• supabase

lib

K3ndev

Typescript primitives

• boolean
• string
• number
• undefined
• null
• any
• unkown
• never
• void

K3ndev

SEO

• SEO (Search Engine Optimization) is the practice of optimizing a website to improve its visibility and ranking on search engine results pages (SERPs). It involves various strategies to ensure that search engines can crawl, index, and understand your website effectively.

1. Rendering Strategy

• Choose a rendering strategy such as Islands, Static Site Generation, Incremental Static Regeneration, or Server-Side Rendering to generate HTML pages that are easily crawlable by search engines.

2. HTML Structure

• Organize your HTML using proper div hierarchy and semantic elements like <h1>, <h2>, <h3>, and <p> to establish a clear structure.
• Optimize images with descriptive filenames and alt attributes.
• Test your website's performance using tools like pagespeed.web.dev that use lighthouse.