106 | >(({ className, ...props }, ref) => {
107 | useLogOnReRender("TableCell");
108 | return (
109 | | [role=checkbox]]:translate-y-[2px]",
113 | className,
114 | )}
115 | {...props}
116 | />
117 | );
118 | });
119 | TableCell.displayName = "TableCell";
120 |
121 | const TableCaption = React.forwardRef<
122 | HTMLTableCaptionElement,
123 | React.HTMLAttributes
124 | >(({ className, ...props }, ref) => {
125 | useLogOnReRender("TableCaption");
126 | return (
127 |
132 | );
133 | });
134 | TableCaption.displayName = "TableCaption";
135 |
136 | export {
137 | Table,
138 | TableBody,
139 | TableCaption,
140 | TableCell,
141 | TableFooter,
142 | TableHead,
143 | TableHeader,
144 | TableRow,
145 | };
146 |
--------------------------------------------------------------------------------
/src/components/very-slow-component.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from "react";
2 |
3 | export const wait = (ms: number) => {
4 | const start = Date.now();
5 | let now = start;
6 |
7 | while (now - start < ms) now = Date.now();
8 | };
9 |
10 | export const VerySlowComponent = (_: any) => {
11 | wait(300);
12 | useEffect(() => {
13 | console.log("re-render slow component");
14 | });
15 |
16 | return Slow component ;
17 | };
18 |
--------------------------------------------------------------------------------
/src/helpers/cn.ts:
--------------------------------------------------------------------------------
1 | import { ClassValue, clsx } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs));
6 | }
7 |
--------------------------------------------------------------------------------
/src/helpers/log-on-re-render.ts:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react";
2 |
3 | export const useLogOnReRender = (name: string) => {
4 | useEffect(() => {
5 | console.info(`Component ${name} re-rendered`);
6 | });
7 | };
8 |
--------------------------------------------------------------------------------
/src/helpers/resources.ts:
--------------------------------------------------------------------------------
1 | type Country = {
2 | name: string;
3 | cities: string[];
4 | };
5 |
6 | const countries: Country[] = [
7 | {
8 | name: "USA",
9 | cities: ["New York", "Los Angeles"],
10 | },
11 | {
12 | name: "Canada",
13 | cities: ["Toronto", "Vancouver"],
14 | },
15 | {
16 | name: "Australia",
17 | cities: ["Sydney", "Melbourne"],
18 | },
19 | {
20 | name: "Germany",
21 | cities: ["Berlin", "Munich"],
22 | },
23 | {
24 | name: "India",
25 | cities: ["Delhi", "Mumbai"],
26 | },
27 | ];
28 |
29 | export const getCountries = async (): Promise => {
30 | // just a dummy return to imitate async fetch request
31 | return countries;
32 | };
33 |
34 | export const deleteCountry = async (name: string): Promise => {
35 | // just a dummy return to imitate async fetch request
36 | return countries;
37 | };
38 |
39 | export const addCountry = async (name: string): Promise => {
40 | // just a dummy return to imitate async fetch request
41 | return { name: name, cities: [] };
42 | };
43 |
--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "tailwindcss";
2 |
3 | const config: Config = {
4 | content: [
5 | "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
6 | "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
7 | "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
8 | ],
9 | theme: {
10 | extend: {
11 | colors: {
12 | background: "var(--background)",
13 | foreground: "var(--foreground)",
14 | primary: "hsl(var(--primary))",
15 | "primary-foreground": "hsl(var(--primary-foreground))",
16 | secondary: "hsl(var(--secondary))",
17 | "secondary-foreground": "hsl(var(--secondary-foreground))",
18 | accent: "hsl(var(--accent))",
19 | "accent-foreground": "hsl(var(--accent-foreground))",
20 | destructive: "hsl(var(--accent))",
21 | "destructive-foreground": "hsl(var(--destructive-foreground))",
22 | },
23 | },
24 | },
25 | plugins: [],
26 | };
27 | export default config;
28 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2017",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "noEmit": true,
9 | "esModuleInterop": true,
10 | "module": "esnext",
11 | "moduleResolution": "bundler",
12 | "resolveJsonModule": true,
13 | "isolatedModules": true,
14 | "jsx": "preserve",
15 | "incremental": true,
16 | "plugins": [
17 | {
18 | "name": "next"
19 | }
20 | ],
21 | "paths": {
22 | "@/*": ["./src/*"]
23 | }
24 | },
25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 | "exclude": ["node_modules"]
27 | }
28 |
--------------------------------------------------------------------------------
|