SOURCE

// import { useState, useEffect } from 'react'
// import {  } from 'react-dom'


function Children(props) {
    React.useMemo(() => {  
        console.log('useMemo child')
    })

    React.useEffect(() => {
        console.log('useEffect child')
    }, [])
    return <span>children</span>
}

function Parent() {
    const [show, setShow] = React.useState(false)

    React.useMemo(() => {
        console.log('useMemo parent', show)
    }, [show])

    React.useEffect(() => {
        console.log('useEffect parent', show)
    }, [show])

    return (
        <span>
            {show && <Children />}
            <button onClick={() => setShow(pre => !pre)}>{show ? '隐藏' : '显示'}</button>
        </span>
    )
}

function App() {
    return (<Parent />)
}

ReactDOM.render(<App />, document.getElementById('root'))

<div id="root"></div>