Misunderstanding React. FC and class component interaction - reactjs

Question

I'am new to React and don't understand something. I have two components: parent functional and child class component. Suppose, from FC I need to pass very simple array from useState hook. And when in class component in constructor I try to log out props - the result is empty array. But in component render array items successfully. If I don't use - useState hook and pass existing array - console.log(props) results that array. Why it happens? I think it's associated with async operations, but what if need to define initial state in constructor based on props? Since props undefined , I can't do it. Сan you help me figure it out
const FunctionalComponent = () => {
const [state, setState] = useState([]);
useEffect(() => {
setState(['Jim', 'Bob', 'Tom']);
}, []);
return (
<div>
<ClassComponent names={state} />
</div>
);
}
// And class component
class ClassComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
// Some state ...
};
console.log(props); --- // []
}
render() {
const { names } = this.props;
return <div>{names}</div>; -- // renders items
}
}
https://codesandbox.io/s/props-to-class-component-from-usestate-5z5k3?file=/src/index.js

Answer 1

You can see how the class component renders proper data but console.log output does not reffer to them. That's because creating and changing state is async operation. To see how props changed you must use useEffect for FC and componentDidUpdate for class components.
class Counter extends React.Component {
constructor(props) {
super(props);
}
componentDidUpdate() {
console.log(this.props.names)
}
render() {
const { names } = this.props;
return <div>{names}</div>;
}
}
Or you can put your console.log right inside of the render section:
render() {
console.log(this.props.names)
const { names } = this.props;
return <div>{names}</div>;
}
If you want to console.log new state of class component, use callback function as the second parameter of setState like shown below:
setState({counter: this.counter + 1}, ()=>console.log(counter))
Otherwise, it will show you the previous state value.

Answer 2

Your initial state is [] as defined by useState. With this state the functional component is initially rendered and it also renders ClassComponent with [] as the initial props. That's what is passed to constructor.
After that the constructor is no longer called. Instead, the new props will be only assigned to the component.