@cideM/

hooks

React

No description

fork
loading
Files
  • src
    • App.js
    • App.css
    • App.test.js
    • index.css
    • index.js
    • logo.svg
  • public
  • package.json

This Plugin Crashed!

Error: Error: must not create an existing file {"type":"CREATE_FILE","wid":"0.7374779496481199","path":"src/App.js","file":{"path":"src/App.js","content":{"asEncoding":{"base64":"aW1wb3J0IFJlYWN0LCB7IENvbXBvbmVudCwgdXNlU3RhdGUsIHVzZUNhbGxiYWNrIH0gZnJvbSAncmVhY3QnOwppbXBvcnQgbG9nbyBmcm9tICcuL2xvZ28uc3ZnJzsKaW1wb3J0ICcuL0FwcC5jc3MnOwoKLyoKCldoYXQgaXMgdGhpcz8KCkkgd2FudCB0byBwYXNzIGEgZnVuY3Rpb24gYXJvdW5kLCB3aGljaCBzaG91bGQgKipuZXZlcioqIGNhdXNlIHJlLXJlbmRlcnMuIFdpdGggYSBjbGFzcyBiYXNlZCBjb21wb25lbnQgdGhhdCBmdW5jdGlvbmFsaXR5IGlzIGF2YWlsYWJsZSAib3V0IG9mIHRoZSBib3giLCBzaW5jZSBjbGFzcyBtZXRob2RzIGFyZSBhdHRhY2hlZCB0byB0aGUgbGlmZXRpbWUgb2YgdGhlIGNsYXNzIGFuZCBkb24ndCBjaGFuZ2UuCgpJIGFsc28gd2FudCB0byBhY2Nlc3MgdGhlICoqbW9zdCByZWNlbnQgc3RhdGUqKiBpbiB0aGF0IGZ1bmN0aW9uLgoKV2l0aCBob29rcywgdGhhdCdzIG5vdCBlYXNpbHkgZG9uZS4gWW91IGNhbiB1c2UgdXNlQ2FsbGJhY2sgdG8gcHJldmVudCByZXJlY3JlYXRpbmcgdGhlIHNhbWUgZnVuY3Rpb24gb24gZXZlcnkgcmVuZGVyLCBidXQgdGhlbiB5b3UgcmVmZXIgdG8gdGhlIGluaXRpYWwgc3RhdGUgb25seS4gT3IgeW91IG1ha2UgdXNlQ2FsbGJhY2sgZGVwZW5kIG9uIHN0YXRlLCBidXQgbm93IHlvdSdyZSBiYWNrIHRvIHJlY3JlYXRpbmcgdGhlIGZ1bmN0aW9uIHdheSB0b28gb2Z0ZW4uIFlvdSBjYW4gYWxzbyB1c2UgdGhlIGFsdGVybmF0aXZlIGZ1bmN0aW9uIHNpZ25hdHVyZSBvZiB1c2VTdGF0ZSB3aGVyZSBpdCB0YWtlcyBhIGZ1bmN0aW9uIHRoYXQgd2lsbCBiZSBjYWxsZWQgd2l0aCB0aGUgaW5pdGlhbCBzdGF0ZS4gT25seSB3b3JrcyBpZiB5b3UncmUgdXNpbmcgc3RhdGUgZnJvbSBvbmUgdXNlU3RhdGUuCgpUaGUgc29sdXRpb24gaXMgdXNlUmVkdWNlciwgd2hpY2ggaXMgYSBiaXQgd2VpcmQuCgpUaGlzIGFwcGVhcnMgdG8gYmUgYSBrbm93biBsaW1pdGF0aW9uCmh0dHBzOi8vZ2l0aHViLmNvbS9mYWNlYm9vay9yZWFjdC9pc3N1ZXMvMTQwOTkKaHR0cHM6Ly9naXRodWIuY29tL2ZhY2Vib29rL3JlYWN0L2lzc3Vlcy8xNDA5MgoqLwoKY29uc3QgQ2xpY2tDaGlsZCA9IFJlYWN0Lm1lbW8oKHsgb25DbGljayB9KSA9PiB7CiAgcmV0dXJuIDxkaXYgb25DbGljaz17b25DbGlja30+Y2xpY2sgbWUuIGRhdGU6IHtEYXRlLm5vdygpfTwvZGl2Pgp9KQoKY2xhc3MgQXBwMiBleHRlbmRzIENvbXBvbmVudCB7CiAgY29uc3RydWN0b3IoKSB7CiAgICBzdXBlcigpCiAgICB0aGlzLnN0YXRlID0gewogICAgICBjb3VudDogMAogICAgfQogIH0KCiAgaW5jcmVtZW50ID0gKCkgPT4gewogICAgdGhpcy5zZXRTdGF0ZSh7CiAgICAgIGNvdW50OiB0aGlzLnN0YXRlLmNvdW50ICsgMQogICAgfSkKICB9CgogIHJlbmRlcigpIHsKICAgIHJldHVybiA8ZGl2PgogICAgICA8Q2xpY2tDaGlsZCBvbkNsaWNrPXt0aGlzLmluY3JlbWVudH0gLz5zdGF0ZToge3RoaXMuc3RhdGUuY291bnR9PC9kaXY+CiAgfQp9Cgpjb25zdCBBcHAgPSAoKSA9PiB7CiAgY29uc3QgW3N0YXRlLCBzZXRTdGF0ZV0gPSB1c2VTdGF0ZSgwKQogIGNvbnN0IGluY3JlbWVudCA9IHVzZUNhbGxiYWNrKCgpID0+IHsKICAgIHNldFN0YXRlKHN0YXRlID0+IHN0YXRlICsgMSkKICB9LCBbXSkKCiAgcmV0dXJuIDxkaXY+PENsaWNrQ2hpbGQgb25DbGljaz17aW5jcmVtZW50fSAvPnN0YXRlOiB7c3RhdGV9PC9kaXY+Cn0KCmNvbnN0IEV4cG9ydGVkID0gKCkgPT4gewogIHJldHVybiA8ZGl2PjxBcHAyIC8+PGJyIC8+PEFwcCAvPjwvZGl2Pgp9CgpleHBvcnQgZGVmYXVsdCBFeHBvcnRlZDsK"},"asBuffer":null},"loaded":true}}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
import React, { Component, useState, useCallback } from 'react';
import logo from './logo.svg';
import './App.css';

/*

What is this?

I want to pass a function around, which should **never** cause re-renders. With a class based component that functionality is available "out of the box", since class methods are attached to the lifetime of the class and don't change.

I also want to access the **most recent state** in that function.

With hooks, that's not easily done. You can use useCallback to prevent rerecreating the same function on every render, but then you refer to the initial state only. Or you make useCallback depend on state, but now you're back to recreating the function way too often. You can also use the alternative function signature of useState where it takes a function that will be called with the initial state. Only works if you're using state from one useState.

The solution is useReducer, which is a bit weird.

This appears to be a known limitation
https://github.com/facebook/react/issues/14099
https://github.com/facebook/react/issues/14092
*/

const ClickChild = React.memo(({ onClick }) => {
  return <div onClick={onClick}>click me. date: {Date.now()}</div>
})

class App2 extends Component {
  constructor() {
    super()
    this.state = {
      count: 0
    }
  }

  increment = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  render() {
    return <div>
      <ClickChild onClick={this.increment} />state: {this.state.count}</div>
  }
}

const App = () => {
  const [state, setState] = useState(0)
  const increment = useCallback(() => {
    setState(state => state + 1)
  }, [])

  return <div><ClickChild onClick={increment} />state: {state}</div>
}

const Exported = () => {
  return <div><App2 /><br /><App /></div>
}

export default Exported;