React: delay in input changes

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!

I don't think the [first question](https://stackoverflow.com/questions/53071774/reactjs-delay-onchange-while-typing) applies here, as it seems the action you want to delay is updating the state. This would result in the textfields not reflecting the actual text contained in the state. — Soenderby, Dec 24 '19 at 10:58

Soenderby · Answer 1 · 2019-12-24T12:08:39.523

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.

Thanks! But in my project, we don't use hooks :( If I do everything like this but using state and setState, it is ok? — Sasha Chekmareva, Dec 24 '19 at 12:47
unfortunately, it didn't help me but anyway thank you very much for paying attention to my problem!:). I decided to set "focus: false" in state and update children's components only when their's inputs (or selects) get focus. — Sasha Chekmareva, Dec 25 '19 at 11:58
@JANE DOE it's great you found a solution. You should write what you did in an answer and accept it, so others can learn from your experience. — Soenderby, Dec 25 '19 at 12:00

React: delay in input changes

1 Answers1