How does React manage to re-render the UI without using dirty checking like Angular?
You may already know Angular 1.x apps use dirty checking to determine when the app should be re rendered. My question is : how does React determine this without employing dirty checking techniques?
In React.js docs 'Interactivity and Dynamic UI's it's described under 'How State Works' (in 4 short sentences).
I can't make it shorter. But I can use different words (attention I am not a native English speaker).
All React components must have a render() method. Whenever 'something' in your app is changed by calling the setState({}) method on 'any' component then on all components the render() method is being called, starting from the topmost component. Sounds like a terrible overhead, how can this be so fast at all? The render() method does not render anything into the real DOM. Instead its 'rendering' into a virtual DOM and then diffing it against the previous virtual DOM. And only the difference between before render() and after render() is used to patch the real DOM. Very few real DOM calls. We can help React to save some render() calls by adding the methods componentWillReceiveProps({}) (to check if the current component can use the given property) and shouldComponentUpdate({}) (to check if the current component will update either on state or property change).
Denny Trebbin
Lead Fullstack Developer. Experimenting with bleeding-edge tech. Irregularly DJ. Hobby drone pilot. Amateur photographer.
In React.js docs 'Interactivity and Dynamic UI's it's described under 'How State Works' (in 4 short sentences).
I can't make it shorter. But I can use different words (attention I am not a native English speaker).
All React components must have a render() method. Whenever 'something' in your app is changed by calling the setState({}) method on 'any' component then on all components the render() method is being called, starting from the topmost component. Sounds like a terrible overhead, how can this be so fast at all? The render() method does not render anything into the real DOM. Instead its 'rendering' into a virtual DOM and then diffing it against the previous virtual DOM. And only the difference between before render() and after render() is used to patch the real DOM. Very few real DOM calls. We can help React to save some render() calls by adding the methods componentWillReceiveProps({}) (to check if the current component can use the given property) and shouldComponentUpdate({}) (to check if the current component will update either on state or property change).