Application is slow

[bakisunsan]

Backend

• change cloud function Region
• add firestore index (user.email, chatqueue.matchResult.chatroom.id)?

Fronend

• reduce backend access
• reduce firebase Auth access

[bakisunsan]

Cloud Function Region https://qiita.com/sugikeitter/items/22fcbe67402cd1fb91a1

[bakisunsan]

[bakisunsan]

If it's too costly to support React and State, you can share functions and only cache the ones that are frequently called

[bakisunsan]

                                    <input type="checkbox" defaultChecked={e} onChange={() => {

                                        checkBox(i)
                                    }} />
                                </>
                                :
                                <>
                                    <label for="fname">{category[i]}</label>
                                    <input type="checkbox" defaultChecked={e} onChange={() => {
                                        checkBox(i)
                                    }} />
                                </>

            <img src={bulbasaur} alt="avatar" style={{width: "50px"}} onClick={() => updateAvatar(bulbasaur)}/>
            <img src={charmander} alt="avatar" style={{width: "50px"}} onClick={() => updateAvatar(charmander)}/>
            <img src={pikachu} alt="avatar" style={{width: "50px"}} onClick={() => updateAvatar(pikachu)}/>
            <img src={raichu} alt="avatar" style={{width: "50px"}} onClick={() => updateAvatar(raichu)}/>
            <img src={squirtle} alt="avatar" style={{width: "50px"}} onClick={() => updateAvatar(squirtle)}/>
            <img src={togepi} alt="avatar" style={{width: "50px"}} onClick={() => updateAvatar(togepi)}/>

this code is used so many times

    const user = auth().currentUser;
    async function getUserId() {
        let req = await axios.get(`/users/${user.email}`)
        let data = req.data;
        let id = data.id;
        console.log(data.avatar_url)
        return id;
    };

 ~/g/g/R/Kodokura   development ±  git grep "auth().currentUser"
src/components/AvatarSelector/AvatarSelector.jsx:    const user = auth().currentUser;
src/components/BlockList/BlockList.jsx:  const user = auth().currentUser;
src/components/ChatBot/ChatBotHelper.jsx:    const user = auth().currentUser;
src/components/Home/Home.jsx:  const user = auth().currentUser;
src/components/Profile/Languages.jsx:  const user = auth().currentUser;
src/components/Profile/Profile.jsx:  const user = auth().currentUser;
src/components/Profile/Profile.jsx:    let user = auth().currentUser;
src/components/Questions/CheckBoxCards/00InterestsMenu.jsx:    const user = auth().currentUser;
src/components/Questions/CheckBoxCards/01MusicCard.jsx:  const user = auth().currentUser;
src/components/Questions/CheckBoxCards/02MoviesCard.jsx:    const user = auth().currentUser;
src/components/Questions/CheckBoxCards/03TvShowsCard.jsx:    const user = auth().currentUser;
src/components/Questions/CheckBoxCards/04BooksCard.jsx:    const user = auth().currentUser;
src/components/Questions/CheckBoxCards/05GamesCard.jsx:    const user = auth().currentUser;
src/components/Questions/CheckBoxCards/06SportsCard.jsx:    const user = auth().currentUser;
src/components/Questions/CheckBoxCards/07FoodsCard.jsx:    const user = auth().currentUser;
src/components/Questions/QuestionCard.jsx:    const user = auth().currentUser;
src/components/Questions/Questions.jsx:    const user = auth().currentUser;
src/components/Utility/Loading.jsx:  const user = auth().currentUser;
src/helpers/Header.js:          {auth().currentUser ? (
src/helpers/auth.js:      const user = auth().currentUser;