boolean_with_hooks.jsx

// useBoolean.js
import { useState, useCallback } from "react"

const useBoolean = (initialState) => {
    const [booleanValue, setBooleanValue] = useState(initialState)
    const setValueToTrue = useCallback(() => setBooleanValue(true), [setBooleanValue])
    const setValueToFalse = useCallback(() => setBooleanValue(false), [setBooleanValue])
    const toggleValue = useCallback(() => setBooleanValue(!booleanValue), [booleanValue, setBooleanValue])
    
    return [booleanValue, setValueToTrue, setValueToFalse, toggleValue]
}

// ExampleComponent.js
import React from "react"
import { useBoolean } from "./hooks"
import { ComponentOne, ComponentTwo } from "./somewhere"

const ExampleComponent = (props) => {
    const [isComponentOneShown, showComponentOne, hideComponentOne, toggleComponentOne] = useBoolean(false)

    return (
        <>
            {isComponentOneShown && (
                <ComponentOne {...props} onClick={hideComponentOne} onSomething={toggleComponentOne} />
            )} 
            <ComponentTwo {...props} onClick={showComponentOne} />
        </>
    )
}