React: Update Child Component Without Rerendering Parent

Answer 1

It is not possible what you want. To pass a prop to a child component, the parent component's state or props should change somehow. As you know, this triggers a re-render obviously, so all the children re-render. To be updated, your Clock component should be re-rendered and unmounted/remounted in this situation to reflect the DOM change.

If your app is not so big and doesn't have so many children do not struggle with this problem since rendering is not so expensive. The expensive one is DOM manipulation of a component. Here, React diffs the real and virtual DOM and do not unmount/remount Label component even it re-renders. But, if you write your Label component as a PureComponent it doesn't re-render. But for Clock component to be updated like this, there is no way.

class Label extends React.PureComponent {
  render() {
    console.log("rendered");
    return (
{this.props.text}
)
  }
}

const Clock = ({ date }) => (
  
{date.toLocaleTimeString()}
)

class App extends React.Component {

  constructor() {
    super()
    this.state = {
      date: new Date()
    }
  }


  componentWillMount() {
    this.interval = setInterval(
      () => this.setState({ date: new Date() }),
      1000
    )
  }

  componentWillUnmount() {
    clearInterval(this.interval)
  }

  updateTime() {

  }

  render() {
    return (
      

        
        
      
    )
  }

}