15 مورد برتر در مورد اشتباهات استفاده مجدد هر برنامه نویس باید بدانند

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

function increment() {
  setCount(count + 1);
  setCount(count + 1); // count is still 0 and not incremented to 1
}

function increment() {
  setCount(prevCount => prevCount + 1);   
  setCount(prevCount => prevCount + 1); // Always works reliably
}

const [user, setUser] = useState({ name: 'John', age: 30 });

function updateAge() {
  setUser({ age: 31 }); // Overwrites the entire user state, removing `name`
}

function updateAge() {
  setUser(prevUser => ({ ...prevUser, age: 31 })); // Keeps `name` intact
}

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

function handleClick() {
  setTimeout(() => {
    setCount(count + 1); // Uses the stale `count` value
  }, 1000);
}

function handleClick() {
  setTimeout(() => {
    setCount(prevCount => prevCount + 1); // Always gets the latest value
  }, 1000);
}

const [firstName, setFirstName] = useState('John');
const [lastName, setLastName] = useState('Doe');
const [fullName, setFullName] = useState(`${firstName} ${lastName}`); // Derived state

function updateFirstName(name) {
  setFirstName(name);
  setFullName(`${name} ${lastName}`); // Extra work to keep `fullName` in sync
}

const [firstName, setFirstName] = useState('John');
const [lastName, setLastName] = useState('Doe');

// Calculate fullName dynamically
const fullName = `${firstName} ${lastName}`;

const [data, setData] = useState(expensiveComputation()); // Runs every re-render of component

const [data, setData] = useState(() => expensiveComputation()); // Runs only once first time component is rendered

const [inputValue, setInputValue] = useState('');

function resetForm() {
  setInputValue(''); // Manually reset each piece of state
}

function App() {
  const [formKey, setFormKey] = useState(0);

  function resetForm() {
    setFormKey(prevKey => prevKey + 1); // Forces a reset
  }

  return (
    <div>
      <MyForm key={formKey} />
      <button onClick={resetForm}>Reset Form</button>
    </div>
  );
}

const [x, setX] = useState(0);
const [y, setY] = useState(0);

function updateCoordinates(newX, newY) {
  setX(newX);
  setY(newY);
}

const [coordinates, setCoordinates] = useState({ x: 0, y: 0 });

function updateCoordinates(newX, newY) {
  setCoordinates({ x: newX, y: newY });
}

const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const [data, setData] = useState(null);

async function fetchData() {
  setLoading(true);
  try {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    setData(result);
  } catch (err) {
    setError(err.message);
  } finally {
    setLoading(false);
  }
}

const initialState = { loading: false, error: null, data: null };

function reducer(state, action) {
  switch (action.type) {
    case 'FETCH_START':
      return { ...state, loading: true, error: null };
    case 'FETCH_SUCCESS':
      return { ...state, loading: false, data: action.payload };
    case 'FETCH_ERROR':
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
}

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);

  async function fetchData() {
    dispatch({ type: 'FETCH_START' });
    try {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      dispatch({ type: 'FETCH_SUCCESS', payload: result });
    } catch (err) {
      dispatch({ type: 'FETCH_ERROR', payload: err.message });
    }
  }

  return (
    <div>
      {state.loading && <p>Loading...</p>}
      {state.error && <p>Error: {state.error}</p>}
      {state.data && <pre>{JSON.stringify(state.data, null, 2)}</pre>}
    </div>
  );
}

const [theme, setTheme] = useState('light');

function toggleTheme() {
  const newTheme = theme === 'light' ? 'dark' : 'light';
  setTheme(newTheme);
  localStorage.setItem('theme', newTheme);
}

const useLocalStorage = (key, initialValue) => {
  const [value, setValue] = useState(() => {
    try {
      const localValue = window.localStorage.getItem(key);
      return localValue ? JSON.parse(localValue) : initialValue;
    } catch (error) {
      return initialValue;
    }
  });

  useEffect(() => {
    window.localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
};

function App() {
  const [theme, setTheme] = useLocalStorage('theme', 'light');

  function toggleTheme() {
    setTheme(theme === 'light' ? 'dark' : 'light');
  }

  return (
    <div>
      <p>Current Theme: {theme}</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

const [formData, setFormData] = useState({ name: '', email: '' });

function handleChange(event) {
  setFormData({ [event.target.name]: event.target.value }); // Overwrites other fields
}

function handleChange(event) {
  const { name, value } = event.target;
  setFormData(prevData => ({ ...prevData, [name]: value })); // Preserves other fields
}

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

function updateCount(newCount) {
  setCount(newCount); // Triggers a re-render even if `newCount === count`
}

function updateCount(newCount) {
  if (newCount !== count) {
    setCount(newCount); // Only updates state if the value changes
  }
}

// Storing modal visibility in Redux or Context is Not good
dispatch({ type: 'SET_MODAL_VISIBLE', payload: true });

const [isModalOpen, setIsModalOpen] = useState(false);

function openModal() {
  setIsModalOpen(true);
}

function closeModal() {
  setIsModalOpen(false);
}

return (
  <div>
    <button onClick={openModal}>Open Modal</button>
    {isModalOpen && <Modal onClose={closeModal} />}
  </div>
);

const [data, setData] = useState([]);

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const newData = await response.json();
  setData([...data, ...newData]); // Uses stale `data`
}

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const newData = await response.json();
  setData(prevData => [...prevData, ...newData]); // Always uses the latest state
}

const [step, setStep] = useState(1);

return (
  <div>
    {step === 1 && <Step1 />}
    {step === 2 && <Step2 />}
    {step === 3 && <Step3 />}
  </div>
);

const steps = [<Step1 />, <Step2 />, <Step3 />];
const [currentStep, setCurrentStep] = useState(0);

function nextStep() {
  setCurrentStep(prevStep => Math.min(prevStep + 1, steps.length - 1));
}

function prevStep() {
  setCurrentStep(prevStep => Math.max(prevStep - 1, 0));
}

return (
  <div>
    {steps[currentStep]}
    <button onClick={prevStep} disabled={currentStep === 0}>
      Previous
    </button>
    <button onClick={nextStep} disabled={currentStep === steps.length - 1}>
      Next
    </button>
  </div>
);

const [user, setUser] = useState({ name: 'John', address: { city: 'New York' } });

function updateCity(newCity) {
  setUser(prevUser => ({
    ...prevUser,
    address: { ...prevUser.address, city: newCity }, // Tedious and error-prone
  }));
}

import produce from 'immer';

const [user, setUser] = useState({ name: 'John', address: { city: 'New York' } });

function updateCity(newCity) {
  setUser(
    produce(draft => {
      draft.address.city = newCity; // Mutate draft immutably
    })
  );
}