ssminji / react-labeling-tool

BE Devloper, also interested in DevOps!

안녕하세요, 항상 새로운 것에 도전하는 백엔드 엔지니어 송민지입니다!

SKILLS

Langs and frameworks

INTERESTS

INFRA/TOOLS

react-labeling-tool's Issues

State is being changed multiple time unnecesarily

AS-IS

• When converting .jpg/.png to URL for file array, state update is being done inside map function.
• Thus, state is being updated as length of file array
• This will cause unnecessary re-rendering cost.

handleChange(e) {
        let files = e.target.files;
        let fileArr = Array.prototype.slice.call(files);
        let upload_files = []

        fileArr.forEach((f) => {
            let reader = new FileReader();
            reader.onload = (e) => {
                let dataURL = e.target.result;
                upload_files.push(dataURL);
                this.setState({
                    isClicked: true,
                    files: upload_files
                })
            };
            reader.readAsDataURL(f);
        })
    }

TO-BE

• Async/await for converting process.(Use Promise.all)
• after converting process is done, update state just once with complete file array