What triggers a React component to re-render, and how costly is it?

"Re-render" is like a teacher asking the whole class to redraw a picture on a scratch paper. Sketching is quick. However, the teacher will only replace the picture on the wall (the real DOM) if the new sketch is different from the one currently displayed — and that is the labor-intensive part. Many people fear "re-render," but in reality, sketching again is not that daunting. What is concerning is when the picture is too complex, or the teacher insists on redrawing continuously even when nothing has changed.