<div id="root"></div>
html,
body,
#root {
height: 100%;
margin: 0;
overflow: hidden;
background: #323332;
color: white;
}
.App {
height: 100%;
font-family: sans-serif;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
input {
border: none;
border-radius: 4px;
padding: 8px 12px;
}
const MyComponent = ({ myprops }) => {
const refCount = React.useRef(0);
refCount.current++;
return (
<p>
{myprops}, Ref Count: {refCount.current}
</p>
);
};
const MemorizeMyComponent = React.memo(MyComponent);
const App = () => {
const [state, setState] = React.useState("");
const handleSetState = e => {
setState(e.target.value)
}
return (
<div className="App">
<input type="text" value={state} onChange={handleSetState}/>
<MyComponent myprops="MyComponent" />
<MemorizeMyComponent myprops="MemorizeMyComponent" />
</div>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
View Compiled
This Pen doesn't use any external CSS resources.