How to use the memo function from react

reference-react.md?plain=1

GitHub: hg-pyun/ko.reactjs.org

116
117
118
119
120
121
122
123
124
* * *

### `React.memo` {#reactmemo}

```javascript
const MyComponent = React.memo(function MyComponent(props) {
  /* props를 사용하여 렌더링 */
});
```

317

2

2

+ 3 other calls in file

constants.js

GitHub: esxjs/esx

3
4
5
6
7
8
9
10
11
12
const { Provider, Consumer } = createContext()
/* istanbul ignore next */
const noop = () => {}
const REACT_PROVIDER_TYPE = Provider.$$typeof
const REACT_CONSUMER_TYPE = Consumer.$$typeof
const REACT_MEMO_TYPE = memo(noop).$$typeof
const REACT_ELEMENT_TYPE = createElement('div').$$typeof
const REACT_FORWARD_REF_TYPE = forwardRef(noop).$$typeof
const VOID_ELEMENTS = new Set([
  'area',

14

647

10

react-memo.md?plain=1

GitHub: wgao19/flow-notes

48
49
50
51
52
53
54
55
56
57
    moo(x: string) {},
  }))
  return null
}

const Memo = React.memo(React.forwardRef(Demo))

function App() {
  // Error below: moo expects a string, given a number
  return <Memo ref={ref => ref && ref.moo(0)} />

2

15

3

ReactNewContext-test.internal.js

GitHub: hankzhuo/learn-react-source-code

80
81
82
83
84
85
86
87
88
89
    const render = props.children;
    return render(contextValue);
  }),
);
sharedContextTests('useContext inside memoized function component', Context =>
  React.memo(function Consumer(props) {
    const observedBits = props.unstable_observedBits;
    let contextValue;
    expect(() => {
      contextValue = useContext(Context, observedBits);

0

0

0

RNTesterModuleList.js

GitHub: facebook/react-native

115
116
117
118
119
120
121
122
123
124
      );
    }}
  </RNTesterThemeContext.Consumer>
);

const RNTesterModuleList: React$AbstractComponent<any, void> = React.memo(
  ({sections, toggleBookmark, handleModuleCardPress}) => {
    const filter = ({example, filterRegex, category}: any) =>
      filterRegex.test(example.module.title) &&
      (!category || example.category === category);

0

0

0

index.js

GitHub: teu-ai/ant-design

12
13
14
15
16
17
18
19
20
21
var React = _interopRequireWildcard(require('react'));
var _usePatchElement3 = _interopRequireDefault(require('../../_util/hooks/usePatchElement'));
var _confirm = require('../confirm');
var _HookModal = _interopRequireDefault(require('./HookModal'));
var uuid = 0;
var ElementsHolder = /*#__PURE__*/ React.memo(
  /*#__PURE__*/ React.forwardRef(function (_props, ref) {
    var _usePatchElement = (0, _usePatchElement3['default'])(),
      _usePatchElement2 = (0, _slicedToArray2['default'])(_usePatchElement, 2),
      elements = _usePatchElement2[0],

0

0

2