For Gokhan

react_fundamentals.js

'use strict'

const { useState, useCallback, useEffect } = React

const JobTitle = React.memo(function JobTitle(props) {
		console.log('rendered')
  	return <h1>Hello, {props.name} {props.age}</h1>
})


function Greet({name, age, title, email}) {
	const [count, setCount] = useState(0)
  const [toggle,setToggle] = useState(false)
  
	const increment = useCallback(() => {
  	setCount(count => count + 1)
  }, [count])
  
  useEffect(() => {
  	console.log('effect')
  	setToggle(count % 4 === 0)
  }, [Math.floor(count / 2)])
  

  return (
    	<div>
        <JobTitle name={name} age={age}></JobTitle>
        <h3>{title} {count}</h3>
        <i>{email}</i>
        <div>
          {toggle ? 'true' : 'false'}
        </div>
        <button onClick={increment}>+</button>
      </div>
    )
}

ReactDOM.render(<Greet name="Gokhan" age="25" email="gokhan@hey.com"/>, document.querySelector("#app"))