反应：输入更改延迟

Question

I have a rather big array of objects in the parent component's state. And when I pass them as props to children components (which don't have state, only props) I have a huge delay in typing (in children's components) when the input changes.

I have already read answers on similar questions ReactJS delay onChange while typing and advice to use shouldcomponentupdate reactjs : ShouldComponentUpdate for states .

But, unfortunately, I still didn't understand how to apply it in my example : https://codesandbox.io/s/react-example-8vlc2 . Parent component is index.js . So:

1) Should I use componentdidupdate or shouldcomponentupdate() in children's components (StoryList.tsx and StoriesScreenItem/StoriesScreenList) ?

2) Should I add state in children's component to use componentdidupdate or shouldcomponentupdate() ?

3) Why does the input delay happen in my example?

4) Or any other ideas how can I manage this problem?

Any help would be appreciated!

Answer 1

My suggestion would be to create a functional component for a story.

It could look something like this:

export const Story = props => {
   const [story, setStory] = useState(props.story);
   const handleChange = e => {
       const updatedStory = {...story};
       updatedStory.caption = e.target.value;
       setStory(updatedStory);
   };
   return (
       <div>
           <div>
               <div>
                   {story.previewUri ? (
                       <div>
                           <img
                               style={{
                               objectFit: "cover",
                               border: "4px solid #1ec1b6"
                            }}
                            width="110"
                            height="168"
                            src={story.previewUri || null}
                            alt={"Фото сториc"}
                        />
                    </div>
                ) : (
                    <div
                        style={{
                            border: "4px solid #1ec1b6",
                            textAlign: "center",
                            fontSize: "14px"
                        }}
                    >
                        Link image
                    </div>
                )}

                <div>
                    <span>Story</span>

                    <div>
                        <div>
                            <span>Preview title</span>
                        </div>
                        <div>
                            <input
                                style={{ width: "100%" }}
                                maxLength={99}
                                value={story.caption}
                                onChange={e => handleChange(e)}
                            />
                        </div>
                    </div>
                </div>
            </div>

            <StoriesScreenList
                screens={story.stories}
                onChange={screens => props.changeScreen(screens, props.index)}
            />
           </div>
       </div>
    );
};
export default Story;

Each of these would have their own state, so you would not have to update the entire array of stories each time a single story is changed.

Which is suspect is what creates the delay.

I Hope this is helpful.