React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by rishul matta

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
https://jsfiddle.net/rishulmatta/d9x3kouf/5/#save<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

const ClientProvider = ({children}) => {
	console.log("Client i.e. parent rendered");
  return children;
}

const SearchDialog = ({value}) => {
	console.log("Search i.e. child rendered");
	return <div>{value} </div>
}

let isTimerSet = false;
let timer = null;

const Hello = ({name}) => {
		const [value, setValue] = React.useState(4)
    
		if (!isTimerSet) {
			timer = setInterval(() => setValue(Math.random() * 100), 1000)
			isTimerSet = true;
		}
    
    return <ClientProvider>
      <SearchDialog value={value}/> 
    </ClientProvider>;

}

ReactDOM.render(
  <Hello name="rishul" />,
  document.getElementById('container')
);

setTimeout(() => clearInterval(timer), 10000)