Component’s useEffect() not called when component is rendered, but only after it is “hidden”

I have the following parent component:

const Details = ({ processing, toProcess, deepDiving }) => {
const [ddFile, setDdFile] = useState(null)

if (!deepDiving)
    return <Summary {...{ processing, toProcess, setDdFile }} />
else
    return <DeepDive {...{ ddFile }} />
}

in component DeepDive, I have a useEffect() function:

const DeepDive = ({ ddFile: file }) => {
const db = read(file)
const [ary, setAry] = useState([])

useEffect(() =>
    async function add() { ...

    }, [file]
)


return <table>
    <tbody>
        <tr><th>Name</th><th>Rank</th></tr>
        {ary.map((m, i) => <DeepDiveRow key={i} {...{ m }} />)}
    </tbody>
</table>
}

The state variable deepDiving is initially false, rendering the child Summary in the parent component. When deepDiving is set to true, then the DeepDive child component is rendered, but its useEffect is not called. When deepDiving is set back to false, then DeepDive’s useEffect is then executed(!), even though it had been previously rendered but is now not visible in the parent component.

Note that if I change the second argument of useEffect from [file] to [], I get the same result.