Premature optimization

Išankstinė optimizacija

Pvz bandant optimizuoti perrenderinimą, kodas tampa ypač sudėtingas. useMemmory useCallBack memo ir pnš. Padarius klaida (įdėjus į [] parametrą kuris dažnai kinta) nesuveiks memorizacija. Jeigu bent vienas bus perduotas be memorizacijos, bus pilna renderinimu.

export const TrackModal = memo(({
  isModalOpen,
  setIsModalOpen,
  selectedTrack,
  setSelectedTrack,
  formData,
  handleInputChange,
  handleSubmit,
  resetForm
}: TrackModalProps) => {

  const handleClose = useCallback(() => {
    setIsModalOpen(false);
    setSelectedTrack(null);
    resetForm();
  }, [setIsModalOpen, setSelectedTrack, resetForm]);

  const handleModalClick = useCallback((e: React.MouseEvent) => { e.stopPropagation();
}, []);

Minusai

• padaugėja kodo. kiekvienas selektorius išsipučia
• sudėtingėja kodo suprantamumas
• vaizdinės triukšmas

Sprendimai

• naudoti React.memo useCallback useMemo tik ten kur neišvengiama
• naudoti efektyvesnias optimizavimo priemones