以下是组件代码的简单表示：

/*
All the necessary imports

* /

export default function ParentComponent() {
    const [parentState, setParentState] = useState(null);
    const {username, setUsername} = useContext(Username);

    const route = useRoute();
    const navigation = useNavigation();

    useEffect(()=>{
        //Logic to call setParentstate based on query results;
    })

    const FirstComponent = () => {
        const [firstState, setFirstState] = useState(null);

        useEffect(()=>{
            //Logic to call setFirststate based on query results;
        },[])

        return (
            <View>
               <Text>{firstState}</Text>
            </View>
        )
    };

    const SecondComponent = () => {
        const [secondState, setSecondState] = useState(0);
        const {number, setNumber} = useContext(Number);

        useEffect(()=>{
            //Logic to call setSecondstate and setNumber based on query results;
        },[])

        const updateState = () => {
            setSecondState(secondState + 1);
            setNumber(secondState + 1);
        };

        return (
            <View>
               <Text>{secondState}</Text>
               <TouchableOpacity onPress={updateState}>
                   <Text>Update</Text>
               </TouchableOpacity>
            </View>
        );
    };

    return (
    <View>
        <Text>{username}</Text>
        <Text>{parentState}</Text>
        <FirstComponent />
        <SecondComponent />
    </View>
    );
}

有一个功能可以更新状态并在secondcomponent上反映更改。由于我没有更改parentcomponent的状态，因此这不应触发parentcomponent的重新呈现。但是，当secondstate更新时，所有组件都会重新呈现。
我很困惑，因为子组件状态的更新不应该触发父组件的重新呈现，但这种情况一直在发生。
我怀疑这与父组件中的挂钩或上下文api的使用有关，但我不确定。
有谁能帮我找出可能的原因，以及我应该如何修复它？
谢谢！