Is there a way in React to update components on props change? (while developing at least)-CodePudding

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!)

CodePudding user response：

I would just check the size in browser dev tools and change them there then once you are happy apply those to your code IN the bottom left of the picture you see styles and then you can just type what you want.

Edit: As OP mentioned in the comment it will only be usable if you want to change some css properties.

CodePudding user response：

This not exactly what I was looking for but I think it's even better! https://previewjs.com/

Edit: I also found that this was the solution to my original problem: Hot Reload is not working in my React App