JSFiddle - React, Tailwind, and code Playground

by matox

HTML

<div id="root"></div>

React

function useInterval(fn, ms) {
  const callbackRef = React.useRef(fn);
  console.log(fn);
	
  React.useEffect(() => {
    callbackRef.current = fn;
  }, [fn]);
  
  React.useEffect(() => {
  	const intervalHandle = setInterval(() => {
    	console.log('tick', callbackRef.current);
	    callbackRef.current();
	  }, ms);
  
  	return () => clearInterval(intervalHandle);
  }, []);
}

function Example(props) {
	const [locale, setLocale] = React.useState();
  const [dateString, setDateString] = React.useState();
  const [functionString, setFunctionString] = React.useState('console.log("works")');
  const inputRef = React.useRef();
  
	useInterval(() => setDateString(new Date().toLocaleString(locale)), 5000);
  
  useInterval(new Function(functionString), 1000);
  
  console.log(inputRef.current && inputRef.current.value, functionString);
  
	return (
  	<div>
      <span>Change format:</span>
      <button onClick={() => setLocale('sl')}>SL</button>
      <button onClick={() => setLocale('jp')}>JP</button><br/>
      <input type="text" ref={inputRef} />
      <button onClick={() => setFunctionString(inputRef.current.value)}>Apply</button>
      {dateString}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Example/>);