h-agharezaei

import { useState, useCallback } from "react";

function Button({ onClick }) {
  console.log("🎯 دکمه رندر شد");
  return <button onClick={onClick}>افزایش</button>;
}

export default function App() {
  const [count, setCount] = useState(0);

h-agharezaei

import { useState, useMemo } from "react";

function ExpensiveCalculation({ count }) {
  const result = useMemo(() => {
    console.log("🔄 محاسبه مقدار جدید...");
    return count * 2;
  }, [count]); // فقط وقتی count تغییر کند، محاسبه اجرا می‌شود

  return <p>Result: {result}</p>;
}

h-agharezaei

useEffect(() => {
  console.log("Count updated:", count);
}, [count]); // حالا فقط زمانی که count تغییر کند اجرا می‌شود

h-agharezaei

import { useState, useEffect } from "react";

function Component() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  useEffect(() => {
    console.log("Count updated:", count);
  }, [count, text]); // مشکل: این اثر هر بار که count یا text تغییر کند اجرا می‌شود

h-agharezaei

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>افزایش</button>
    </div>

h-agharezaei

import React, { useState, memo } from "react";

const ExpensiveComponent = memo(({ count }: { count: number }) => {
  console.log("Rendered!");
  return <div>Count: {count}</div>;
});

export default function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");