I'm developing a React App using different components to layout the page. While i Work with these components I usually go back and forth changing some of their props in the code.

What I would like is that when I save the file React sees that I changed some props and rerender the component with new props. Right now I have to update the page every time and it's really annoying.

EXAMPLE I have this transform component

function Transform({size, children}) {
          return <div style={`transform: scale(${size});`}>{children}</div>
     }

And I use it in the app like this

<Interface>
    <Transform size={0.25}><Grid layout={'3x4'} /></Transform>
 </Interface>

When I change the size prop on the Transform component (just to test if I want the grid bigger) and save the file, React should reRender the component since one prop has changed and so it will appear differently. How can I set my workspace like this? Any help is really appreciated thanks! (even automatically updating the whole page would be great!)