React: Question about hooks and render

[FlankMiao]

question

I read the hooks docs, and I try the example:

I find that the [count] changes using the hooks but the "render" didn,t show in the console.
When I click the test button, the "render" show in the console.
So, I,m confused why and how the [count] changes "without" rendering using hooks?

[hg-pyun]

Because <Example /> is child component. The render is occurred only changing num state. The Virtual Dom is only re-landing the changed state components.

[loubacking]

You should pass a props to the child component to change the value, but what you meant about "without rendering using hooks"?

For example:

class Parent extends Component {
    passedFunction = () => {}
    render() {
      <Child passedFunction={this.passedFunction}/>
    }
}

function Child() {
    return(
        <div onClick={this.props.passedFunction}></div>
     )
}

Using this example you can use the <button>test<button /> to call a function.

[FlankMiao]

Because <Example /> is child component. The render is occurred only changing num state. The Virtual Dom is only re-landing the changed state components.

@hg-pyun
So because the Example is a stateless component, the "render" doesn,t show in the console?

[FlankMiao]

You should pass a props to the child component to change the value, but what you meant about "without rendering using hooks"?

For example:

class Parent extends Component {
    passedFunction = () => {}
    render() {
      <Child passedFunction={this.passedFunction}/>
    }
}

function Child() {
    return(
        <div onClick={this.props.passedFunction}></div>
     )
}

Using this example you can use the <button>test<button /> to call a function.

@loubacking
I mean when I click the hooks Example click button, the "render" doesn,t show in the console, but the count does changes.looks like it doesn,t render. When I click the test button which has state, the "render" show in the console.

[hamlim]

This doesn't seem related to hooks at all, using your example, if the Example component were a class with local state and it updated it too would not trigger a re-render of the parent it is in.

Here is a sandbox showcasing that: https://codesandbox.io/s/38nr087y85

[FlankMiao]

@hamlim thanks for your showcase. :)