import { useEffect, useState } from "react";
const Sample = ({ count }: { count: number }) => { const [flag1, setFlag1] = useState(true); if (count === 0) { return <></>; } const [flag2, setFlag2] = useState(true); return <>{count}</>;
};
export default Sample;

"use state";
import { useEffect, useState } from "react";
const Sample = ({ count }: { count: number }) => { const [flag1, setFlag1] = useState(true); const [flag2, setFlag2] = useState(true); if (count === 0) { return <></>; } return <>{count}</>;
};
export default Sample;

import { useEffect, useState } from "react";
const Parent = ({ count }: { count: number }) => { const [flag1, setFlag1] = useState(true); if (count === 0) { return <></>; } return <Children count={count} />;
};
const Children = ({ count }: { count: number }) => { const [flag2, setFlag2] = useState(true); return <>{count}</>;
};
export default Parent;

"use client";
import { useForm } from "react-hook-form";
import useSWR from "swr";
export default function Home() { const fetcher = () => fetch("/user/1").then((res) => res.json()); const { data, isLoading } = useSWR( "/user/1", fetcher ); const { register } = useForm({ defaultValues: { name: data?.name, }, }); return <input {...register("name")} />;
}

"use client";
import { useEffect } from "react";
import { useForm } from "react-hook-form";
import useSWR from "swr";
export default function Home() { const fetcher = () => fetch("/user/1").then((res) => res.json()); const { data, isLoading } = useSWR( "/user/1", fetcher ); const { register, reset } = useForm(); useEffect(() => { if (isLoading) return; reset({ name: data?.name }); }, [data, isLoading, reset]); return <input {...register("name")} />;
}

"use client";
import { useForm, SubmitHandler } from "react-hook-form";
export default function Home() { const { register, reset } = useForm({ defaultValues: { hoge: "test", }, }); return ( <> <input {...register("hoge")} /> <button onClick={() => { reset(); }} > リセット </button> </> );
}

"use client";
import { useEffect, useState } from "react";
import useSWR from "swr";
const fetcher = (url: string) => fetch(url).then((r) => r.json());
export default function Home() { const [status, setStatus] = useState(false); const { data } = useSWR("http://localhost:3100/api/users", fetcher, { refreshInterval: !status ? 5000 : 0, }); useEffect(() => { if (data.status === "OK") { setStatus(true); } }, [data]); return <>〜省略〜</>;
}

"use client";
import Text from "@/components/Text";
import { useForm } from "react-hook-form";
type SampleForm = { sampleText: string;
};
export default function Home() { const { register, handleSubmit, watch } = useForm<SampleForm>(); const sampleText = watch("sampleText"); console.log(sampleText); const onSubmit = (data: SampleForm) => { console.log(data); }; return ( <form onSubmit={handleSubmit(onSubmit)}> <Text label="サンプルインプット" register={register("sampleText")} /> <button type="submit">Submit</button> </form> );
}

import { InputHTMLAttributes } from "react";
import { UseFormRegisterReturn } from "react-hook-form";
type InputProps = InputHTMLAttributes<HTMLInputElement> & { label: string; register: UseFormRegisterReturn;
};
const Text = ({ label, register, ...otherProps }: InputProps) => { return ( <div> <label>{label}</label> <input {...register} {...otherProps} /> </div> );
};
export default Text;

import { useState } from "react";
export default function Home() { const [animationStart, setAnimationStart] = useState(false); return ( <> <button onClick={() => { setAnimationStart(true); }} > サンプルボタン </button> <div className={`transition-all duration-1000 ease-linear ${ animationStart ? "opacity-100" : "opacity-0" }`} > サンプル </div> </> );
}

import { useState } from "react";
export default function Home() { const [animationStart, setAnimationStart] = useState(false); return ( <> <button onClick={() => { setAnimationStart(true); }} > サンプルボタン </button> {animationStart && ( <div className={`transition-all duration-1000 ease-linear ${ animationStart ? "opacity-100" : "opacity-0" }`} > サンプル </div> )} </> );
}

/** @type {import('tailwindcss').Config} */
module.exports = { mode: "jit", darkMode: false, content: [ "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", "./src/components/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { keyframes: { sample: { from: { opacity: 0 }, to: { opacity: 1 }, }, }, animation: { sample: "sample 1s linear", }, }, }, plugins: [],
};

import { useState } from "react";
export default function Home() { const [animationStart, setAnimationStart] = useState(false); return ( <> <button onClick={() => { setAnimationStart(true); }} > サンプルボタン </button> {animationStart && <div className={"animate-sample"}>サンプル</div>} </> );
}

const profile = { id: 1, name: "hoge", age: 30, gender: "man", height: 165, weight: 55, bloodType: "O"
}
const {id, ...newProfile} = profile;
console.log(newProfile);
// {"name": "hoge", "age": 30, "gender": "man", "height": 165, "weight": 55, "bloodType": "O"} 

"use client"
import HogeButton from "@/components/HogeButton";
export default function Home() { return ( <HogeButton buttonName="hoge" onClick={() => { alert("hoge"); }} disabled={false} /> );
}

import { ButtonHTMLAttributes } from "react";
import Button from "./Button";
type HogeButton = { buttonName: string;
} & ButtonHTMLAttributes<HTMLButtonElement>;
const HogeButton = (props: HogeButton) => { const { buttonName, ...hogeButtonProps } = props; return <Button buttonName={buttonName} {...hogeButtonProps} />;
};
export default HogeButton;

import { ButtonHTMLAttributes } from "react";
type Button = { buttonName: string } & ButtonHTMLAttributes<HTMLButtonElement>;
const Button = (props: Button) => { const { buttonName, ...buttonProps } = props; return <button {...buttonProps}>{buttonName}</button>;
};
export default Button;