Skip to content

Instantly share code, notes, and snippets.

Avatar

Ohans Emmanuel ohansemmanuel

View GitHub Profile
View benny_to_memo.md
- import { PureComponent } from 'react'
+ import { memo } from 'react'

- class Benny extends PureComponent {
-   render () {
  
+ const Benny = memo(() => {
   return <Consumer>
     {position => <svg />}
View benny_to_pure_component.md
+ import { PureComponent } from 'react'

- class Benny extends Component {
+ class Benny extends PureComponent {
  render () {
    return <Consumer>
    {position => <svg />}
  </Consumer>
  }
View fetchData_hooks.js
const fetchData = () => {
const stringifyData = data => JSON.stringify(data, null, 2)
const initialData = stringifyData({ data: null })
const loadingData = stringifyData({ data: 'loading...' })
const [data, setData] = useState(initialData)
const [gender, setGender] = useState('female')
const [loading, setLoading] = useState(false)
useEffect(
View setState_vs_useState.js
// 🐢 setState (object merge) vs useState (object replace)
// assume initial state is {name: "Ohans"}
setState({ age: 'unknown' })
// new state object will be
// {name: "Ohans", age: "unknown"}
useStateUpdater({ age: 'unknown' })
// new state object will be
// {age: "unknown"} - initial object is replaced
View useRef_timer_id.js
function TimerWithRefID() {
const setIntervalRef = useRef();
useEffect(() => {
const intervalID = setInterval(() => {
// something to be done every 100ms
}, 100);
// this is where the interval ID is saved in the ref object
setIntervalRef.current = intervalID;
View useRef_string_val.js
const HoldStringVal = () => {
const textAreaEl = useRef(null);
const stringVal = useRef("This is a string saved via the ref object --- ")
const handleBtnClick = () => {
textAreaEl.current.value =
stringVal.current + "The is the story of your life. You are an human being, and you're on a website about React Hooks";
textAreaEl.current.focus();
};
return (
<section style={{ textAlign: "center" }}>
View useRef_DOM.js
const AccessDOM = () => {
const textAreaEl = useRef(null);
const handleBtnClick = () => {
textAreaEl.current.value =
"The is the story of your life. You are an human being, and you're on a website about React Hooks";
textAreaEl.current.focus();
};
return (
<section style={{ textAlign: "center" }}>
<div>
View useMemo_basic.js
const App = () => {
const [age, setAge] = useState(99)
const handleClick = () => setAge(age + 1)
const someValue = useMemo(() => ({ value: "someValue" }))
const doSomething = () => {
return someValue
}
return (
<div>
View useMemo_starter.js
const App = () => {
const [age, setAge] = useState(99)
const handleClick = () => setAge(age + 1)
const someValue = { value: "someValue" }
const doSomething = () => {
return someValue
}
return (
<div>
View useCallback_inline_fn.js
const App = () => {
const [age, setAge] = useState(99)
const handleClick = () => setAge(age + 1)
const someValue = "someValue"
return (
<div>
<Age age={age} handleClick={handleClick} />
<Instructions doSomething={useCallback(() => {
return someValue
You can’t perform that action at this time.