20190130 - React - displayName - Lightning Talk

A lightning talk I gave in 2019 on React displayName usage.

Transcript

1. React: displayName Because trying to debug a nest of Unknown components is kind of meh..
2. Functional Components
3. React 16.6 https://reactjs.org/blog/2018/10/23/react-v-16-6.html
4. React.memo Like React.PureComponent, but functional! https://reactjs.org/docs/react-api.html#reactmemo
5. Memoized Functional Components
6. React Developer Tools
7. Memo -> Memo -> Unknown -> WTF?
8. displayName? https://reactjs.org/docs/react-component.html#displayname
9. Maybe not..? ES6 ‘Fat Arrow’ anonymous function Named function
10. Wrapping Display Name https://reactjs.org/docs/higher-order-components.html#convention-wrap-the-display-name-fo r-easy-debugging
11. memoWithDisplayName app/javascript/src/shared/react-helpers.js
12. memoWithDisplayName
13. Components.. withDisplayName(s)!
14. But how do I know when I need it?
15. But how do I know when I need it?
16. But how do I know when I need it? ESLint
17. ESLint: react/display-name https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/display-name.md
18. Thank you!