JSFiddle - React, Tailwind, and code Playground

by shauryakalia

HTML

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

React

const { useState } = React;

const caluclateValue = (componentType) => {
  console.log("I'm called from", componentType);
  return 100;
};

const NormalComponent = () => {
  const initialState = caluclateValue("normalComponent");
  const [count, setCount] = useState(initialState);
  return (
  	<div>
      <h1>Hello NormalComponent, count is {count}</h1>
      <button onClick={() => setCount((previousCount) => previousCount + 1)}>
        Update
      </button>
      <hr />
    </div>
  );
};

const LazyInitializedComponent = () => {
  const initialState = () => caluclateValue("LazyInitializedComponent");
  const [count, setCount] = useState(initialState);
  return (
    <div>
      <h1>Hello LazyInitializedComponent, count is {count} </h1>
      <button onClick={() => setCount((previousCount) => previousCount + 1)}>
        Update
      </button>
      <hr />
    </div>
  );
};

function App() {
  return (
    <div className="App">
      <NormalComponent />
      <LazyInitializedComponent />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);