Skip to content

Instantly share code, notes, and snippets.

@mushroomgead
Created July 14, 2019 07:06
Show Gist options
  • Save mushroomgead/9f08487b8642fba7139504ee2a56009c to your computer and use it in GitHub Desktop.
Save mushroomgead/9f08487b8642fba7139504ee2a56009c to your computer and use it in GitHub Desktop.
One simple trick to optimize React re-renders [https://kentcdodds.com/blog/optimize-react-re-renders]
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
function Logger(props) {
console.log(`${props.label} rendered!`)
return null
}
function Counter(props) {
const [ count, setCount ] = React.useState(0)
const increment = () => setCount(c => c + 1)
return (
<React.Fragment>
<button onClick={increment}>THIS IS CURRENT COUNT: {count}</button>
{props.logger}
</React.Fragment>
)
}
ReactDOM.render(
<Counter logger={<Logger label="counter" />} />,
document.getElementById('root')
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment