Slide 1

Slide 1 text

React: displayName Because trying to debug a nest of Unknown components is kind of meh..

Slide 2

Slide 2 text

Functional Components

Slide 3

Slide 3 text

React 16.6 https://reactjs.org/blog/2018/10/23/react-v-16-6.html

Slide 4

Slide 4 text

React.memo Like React.PureComponent, but functional! https://reactjs.org/docs/react-api.html#reactmemo

Slide 5

Slide 5 text

Memoized Functional Components

Slide 6

Slide 6 text

React Developer Tools

Slide 7

Slide 7 text

Memo -> Memo -> Unknown -> WTF?

Slide 8

Slide 8 text

displayName? https://reactjs.org/docs/react-component.html#displayname

Slide 9

Slide 9 text

Maybe not..? ES6 ‘Fat Arrow’ anonymous function Named function

Slide 10

Slide 10 text

Wrapping Display Name https://reactjs.org/docs/higher-order-components.html#convention-wrap-the-display-name-fo r-easy-debugging

Slide 11

Slide 11 text

memoWithDisplayName app/javascript/src/shared/react-helpers.js

Slide 12

Slide 12 text

memoWithDisplayName

Slide 13

Slide 13 text

Components.. withDisplayName(s)!

Slide 14

Slide 14 text

But how do I know when I need it?

Slide 15

Slide 15 text

But how do I know when I need it?

Slide 16

Slide 16 text

But how do I know when I need it? ESLint

Slide 17

Slide 17 text

ESLint: react/display-name https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/display-name.md

Slide 18

Slide 18 text

Thank you!