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

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}

.box {
  border: 1px solid black;
  margin: 10px;
  padding: 10px;
  width: 300px;
}

const { useState, useMemo } = React;

const MyComponent = () => {
  const [num, setNum] = useState(0);
  
  const getFactorial = val => {
    if (val === 0) return 1;
    return val * getFactorial(val - 1);
  };
  
  const calculatedFactorial = useMemo(() => {
    return num ? getFactorial(num) : 0;
  }, [num]);
  
  return (
    <div>
      <section className="box">
        <div>Enter a number:</div>
        <input value={num} onChange={(e) =>
          setNum(e.target.value)}
        />
      </section>
      <div className="box">Factorial: {calculatedFactorial}</div>
    </div>
  );
}

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