How can I prevent react state from being re rendered when other state changes-CodePudding

So I have reacted react state and added event listener on change but when i select an image and then complete other forms the image will be re rendered causing performance issues.

There are some images to explain:

from

the rerendering problem

React state initialization:

const [lesson_name, setLessonName] = useState("");
const [lesson_description, setLessonDescription] = useState("");
const [lessson_image, setLessonImage] = useState(null);
const [section_name, setSectionName] = useState("");
const [section_description, setSectionDescription] = useState("");
const [video_1, setVideo1] = useState(null);
const [section_image_1, setSectionImage1] = useState(null);
const [section_image_2, setSectionImage2] = useState(null);
const [section_image_3, setSectionImage3] = useState(null);
const [section_code1, setSectionCode1] = useState("");
const [section_code2, setSectionCode2] = useState("");
const [section_code3, setSectionCode3] = useState("");
const [section_code4, setSectionCode4] = useState("");

On change listener

<input
   className="w-full h-[50px] border border-gray-300 rounded-md p-2"
   type="text"
   id="lessonTitle"
   // prevent rerendering

   onChange={(e) => setLessonName(e.target.value)}
/>

Is there any method that i can use to fix this issue?

CodePudding user response：

Using React Memo,

Create Image component:

import { memo } from "react";

// memoized component
const Image = memo(({ src, alt }) => <img src={src} alt={alt} />);

and use it instead of <img />:

<Image src={section_image_1} alt={'some text here'} />

CodePudding user response：

React has useMemo to provide more performant for heavy calculations or components. If you can wrap the div that you want to rerender when the data on dependencies are changed, it doesn't rerender continentally when any state data is changed.

Of course, this example provides that all images will rerender when you change the data like section_image_1, section_image_2 or section_image_3

import { useMemo, useState } from "react";

export default function App() {
  const [lesson_name, setLessonName] = useState("");
  const [lesson_description, setLessonDescription] = useState("");
  const [lessson_image, setLessonImage] = useState(null);
  const [section_name, setSectionName] = useState("");
  const [section_description, setSectionDescription] = useState("");
  const [video_1, setVideo1] = useState(null);
  const [section_image_1, setSectionImage1] = useState(null);
  const [section_image_2, setSectionImage2] = useState(null);
  const [section_image_3, setSectionImage3] = useState(null);
  const [section_code1, setSectionCode1] = useState("");
  const [section_code2, setSectionCode2] = useState("");
  const [section_code3, setSectionCode3] = useState("");
  const [section_code4, setSectionCode4] = useState("");

  const memorizedImages = useMemo(
    () => (
      <div>
        <img src={section_image_1} />
        <img src={section_image_2} />
        <img src={section_image_3} />
      </div>
    ),
    [section_image_1, section_image_2, section_image_3]
  );

  return (
    <div className="App">
      <input
        className="w-full h-[50px] border border-gray-300 rounded-md p-2"
        type="text"
        id="lessonTitle"
        onChange={(e) => setLessonName(e.target.value)}
      />
      {memorizedImages}
    </div>
  );
}