How to prevent React Child Component from Re-Rendering?

Question

I am new to React and trying to practice on a personal project but I have this issue. I see lots of questions about the same topic but I can not find any similar Q/A related to my issue. I have a parent component that I want to render on a specific condition from a redux store. And other two children components {Bookmarks, TOC} that should be rendered on other two related conditions from the same store, the problem is, a third child component {FontAwesomeLicense} renders when the three other conditions change.

Here's the App.js file that have the mentioned components:

import Bookmarks from './components/widgets/bookmarks';
import MapInfo from './components/widgets/info';
import MyMap from './components/widgets/map';
import Navbar from './components/ui/navbar';
import { useSelector } from 'react-redux';
import LandingPage from './components/ui/landing';
import TOC from './components/widgets/toc';
import MyToast from './components/ui/toast';
import FontAwesomeLicense from './components/ui/license';
function App() {
    const login = useSelector(state => state.login.isLogged);
    const showBookmark = useSelector(state => state.bookmarks.visibility);
    const showTOC = useSelector(state => state.toc.visibility);
    return (
        <div className="App">
            <Navbar />
            {!login && <LandingPage />}
            {login && <>
                <MyMap />
                <MapInfo />
                <MyToast />
                {showBookmark && <Bookmarks />}
                {showTOC && <TOC />}
            </>}
            <FontAwesomeLicense />
        </div>
    );
};
export default App;

What am I doing wrong here? I really appreciate any answer. :)

Answer 1

当您为 Navbar 和 FontAwesomeLicense 之间的所有内容创建组件时，只有该组件需要重新渲染，因为在父组件中不会检测到任何更改。