React

by Niranjan Borawake

HTML

<div id="app"></div>

CSS

.parent {
  border: 1px solid black;
}

.child {
  border: 1px solid red;
}

React

let parentRenderCounter = 0;
let childRenderCounter = 0;

function App () {
  return (
    <div>
      <Parent  />
    </div>
  );
}

const Child = React.memo(function Child ({action, done}) {
	return (
  	<section className="child">
      <h1>Child</h1>
        <label>Action: {action} </label>
        <div>
          <button onClick={done}>I am done {action}</button>
      </div>
      
        <p>{++childRenderCounter}</p>
    </section>
  );
});

function Parent ({greet}) {
  const [parentAction, setParentAction] = React.useState('');
  const [childAction, setChildAction] = React.useState('');
  const [childActionDone, setChildActionDone] = React.useState(false);  
  const markChildActionDone = () => {
  	setChildActionDone(true);
    setChildAction('');
  };
	return (
  	<section className="parent">
      <h1>Parent</h1>
      <label>Action: {parentAction} </label>
      <div>
        <button onClick={() => setParentAction('EAT')}>Eat</button>
        <button onClick={() => setParentAction('WORK')}>Work</button>
        <button onClick={() => setParentAction('SLEEP')}>SLEEP</button>
      </div>
      <div>Make Child:</div>
      <div>
        <button onClick={() => setChildAction('EAT')}>Eat</button>
        <button onClick={() => setChildAction('PLAY')}>Work</button>
        <button onClick={() => setChildAction('SLEEP')}>SLEEP</button>
      </div>
      <div>{childActionDone ? `Child is done ${childAction}`: `Child is ${childAction}`} </div>
      <p>{++parentRenderCounter}</p>
      <Child action={childAction} done={markChildActionDone} />
    </section>
  );
}



ReactDOM.render(<App />, document.querySelector("#app"))