Eliminating Noice from your Code

Transcript

1. Radoslav Stankov 23/11/2019 Eliminating noise from your code
3. Radoslav Stankov @rstankov blog.rstankov.com github.com/rstankov
 twitter.com/rstankov
6. https://speakerdeck.com/rstankov
9. Huey
10. Huey Dewey
11. Huey Dewey Louie
25. Why code gets bad overtime? !
26. What is a good code? "
29. <ul class="accordion-menu">
 <li class="item">
 <a href="#" class="section-1">Section 1</a>
 <ul id="section-1">
 <li>...</li>
 <li>...</li>
 <li>...</li>
 </ul>
 </li>
 </ul>
30. $('.accordion-menu .item a').each(function() {
 $(this).bind('click', function() {
 var title = this.className;
 var theul = $('#' + title);
 if (theul.length > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 } else {
 theul.slideUp();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 }
 } else {
 }
 });
 });
31. $('.accordion-menu .item a').each(function() {
 $(this).bind('click', function() {
 var title = this.className;
 var theul = $('#' + title);
 if (theul.length > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 } else {
 theul.slideUp();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 }
 } else {
 }
 });
 });
32. #
33. Is this good code? $
34. Why not? %
36. ... too much information density
37. ... too much information noise &
38. “In cognitive psychology, cognitive load refers to the used amount of working memory resources. ” - WikipediA Cognitive load
39. “Ego depletion refers to the idea that self- control or willpower draws upon a limited pool of mental resources that can be used up.” - WikipediA Ego depletion
46. $('.accordion-menu .item a').each(function() {
 $(this).bind('click', function() {
 var title = this.className;
 var theul = $('#' + title);
 if (theul.length > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 } else {
 theul.slideUp();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 }
 } else {
 }
 });
 });
47. $('.accordion-menu .item a').each(function() {
 $(this).bind('click', function() {
 var title = this.className;
 var theul = $('#' + title);
 if (theul.length > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 } else {
 theul.slideUp();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 }
 } else {
 }
 });
 });
48. $('.accordion-menu .item a').each(function() {
 $(this).bind('click', function() {
 var title = this.className;
 var theul = $('#' + title);
 if (theul.length > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 } else {
 theul.slideUp();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 }
 }
 });
 }); 

49. $('.accordion-menu .item a').each(function() {
 $(this).bind('click', function() {
 var title = this.className;
 var theul = $('#' + title);
 if (theul.length > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 } else {
 theul.slideUp();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 }
 }
 });
 }); 

50. $('.accordion-menu .item a').click(function() {
 var title = this.className;
 var theul = $('#' + title);
 if (theul.length > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 } else {
 theul.slideUp();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 }
 }
 });
51. $('.accordion-menu .item a').click(function() {
 var title = this.className;
 var theul = $('#' + title);
 if (theul.length > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 } else {
 theul.slideUp();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 }
 }
 });
52. <ul class="accordion-menu">
 <li class="item">
 <a href="#" class="section-1">Section 1</a>
 <ul id="section-1">
 <li>...</li>
 <li>...</li>
 <li>...</li>
 </ul>
 </li>
 </ul>
53. <ul class="accordion-menu">
 <li class="item">
 <a href="#" class="section-1">Section 1</a>
 <ul id="section-1">
 <li>...</li>
 <li>...</li>
 <li>...</li>
 </ul>
 </li>
 </ul>
54. <ul class="accordion-menu">
 <li class="item">
 <a href="#" class="section-1">Section 1</a>
 <ul id="section-1">
 <li>...</li>
 <li>...</li>
 <li>...</li>
 </ul>
 </li>
 </ul>
55. <ul class="accordion-menu">
 <li class="item">
 <a href="#" class="section-1">Section 1</a>
 <ul id="section-1">
 <li>...</li>
 <li>...</li>
 <li>...</li>
 </ul>
 </li>
 </ul>
56. <ul class="accordion-menu">
 <li class="item">
 <a href="#" class="section-1">Section 1</a>
 <ul id="section-1">
 <li>...</li>
 <li>...</li>
 <li>...</li>
 </ul>
 </li>
 </ul>
57. $('.accordion-menu .item a').click(function() {
 var title = this.className;
 var theul = $('#' + title);
 if (theul.length > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 } else {
 theul.slideUp();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 }
 }
 });
58. $('.accordion-menu .item a').click(function() {
 var title = this.className;
 var theul = $('#' + title);
 if (theul.length > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 } else {
 theul.slideUp();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 }
 }
 });
59. $('.accordion-menu .item a').click(function() {
 var theul = $(this).next('ul');
 if (theul.length > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 } else {
 theul.slideUp();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 }
 }
 });
60. $('.accordion-menu .item a').click(function() {
 var theul = $(this).next('ul');
 if (theul.length > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 } else {
 theul.slideUp();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 }
 }
 });
61. $('.accordion-menu .item a').click(function() {
 var theul = $(this).next('ul');
 if (theul.length > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 } else {
 theul.slideUp();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 }
 }
 });
62. $('.accordion-menu .item a').click(function() {
 var theul = $(this).next('ul');
 if (theul.length > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown()
 } else {
 theul.slideUp()
 }
 var theli = dropa.parent('li')
 theli.animate({'padding-bottom': '20px'});
 }
 });
63. $('.accordion-menu .item a').click(function() {
 var theul = $(this).next('ul');
 if (theul.length > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown()
 } else {
 theul.slideUp()
 }
 var theli = dropa.parent('li')
 theli.animate({'padding-bottom': '20px'});
 }
 });
64. $('.accordion-menu .item a').click(function() {
 var theul = $(this).next('ul')
 if (theul.length > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown()
 } else {
 theul.slideUp()
 }
 }
 });
65. $('.accordion-menu .item a').click(function() {
 var theul = $(this).next('ul')
 if (theul.length > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown()
 } else {
 theul.slideUp()
 }
 }
 });
66. $('.accordion-menu .item a').click(function() {
 var theul = $(this).next('ul')
 if (theul.length > 0) {
 if (theul.is(':visible')) {
 theul.slideDown()
 } else {
 theul.slideUp()
 }
 }
 });
67. $('.accordion-menu .item a').click(function() {
 var theul = $(this).next('ul')
 if (theul.length > 0) {
 if (theul.is(':visible')) {
 theul.slideDown()
 } else {
 theul.slideUp()
 }
 }
 });
68. $('.accordion-menu .item a').click(function() {
 var theul = $(this).next('ul')
 if (theul.length > 0) {
 if (theul.is(':visible')) {
 theul.slideDown()
 } else {
 theul.slideUp()
 }
 }
 });
69. $('.accordion-menu .item a').click(function() {
 var theul = $(this).next('ul')
 if (theul.length > 0) {
 theul.slideToggle();
 }
 });
70. $('.accordion-menu .item a').click(function() {
 var theul = $(this).next('ul')
 if (theul.length > 0) {
 theul.slideToggle();
 }
 });
71. $('.accordion-menu .item a').click(function() {
 $(this).next('ul').slideToggle();
 });

72. $('.accordion-menu .item a').click(function() {
 $(this).next('ul').slideToggle();
 });

73. $('.accordion-menu .item a').click(function() {
 $(this).next('ul').slideToggle();
 });

74. $('.accordion-menu .item a').live('click', function() {
 $(this).next('ul').slideToggle();
 });
75. $('.accordion-menu .item a').live('click', function() {
 $(this).next('ul').slideToggle();
 });
76. $('.accordion-menu .item a').live('click', function() {
 $(this).next('ul').slideToggle();
 });
77. $('.accordion-menu .item a').click(function() {
 $(this).next('ul').slideToggle();
 });

78. $(document).on('click', '.accordion-menu .item a', function() {
 $(this).next('ul').slideToggle();
 });

79. $(document).on('click', '.js-accordion-item a', function() {
 $(this).next('js-accordion-section').slideToggle();
 });
80. $(document).on('click', '[data-accordion="item"]', function() {
 $(this).next('[data-accordion="section"]').slideToggle();
 });
85. “It is better to be a good programmer with great habits, than a great programmer.” - Kent Beck
86. Broken windows theory
87. “Social psychologists and police officers tend to agree that if a window in a building is broken and is left unrepaired, all the rest of the windows will soon be broken.” - WikipediA Broken windows theory
88. The Boy Scout Rule
89. “Leave your code better than you found it.” The Boy Scout Rule
90. Radoslav Stankov 05/05/2018 Eliminating noise from your code
91. Radoslav Stankov 05/05/2018 Eliminating ' Code Smells '
93. Code smell is any symptom in the source code of a program that possibly indicates a deeper problem. Code smells
94. Code smells are usually not bugs—they are not technically incorrect and don't currently prevent the program from functioning. Instead, they indicate weaknesses in design that may be slowing down development or increasing the risk of bugs or failures in the future. Code smells
95. Code refactoring is a disciplined technique for restructuring an existing body of code, altering its internal structure without changing its external behavior Refactoring
98. Refactoring
99. #1 Useless Code
100. function LoadMoreBaseOnDevice(props) { return ( <> <Device.Mobile> <LoadMoreButton {...props} /> </Device.Mobile> <Device.TabletOrDesktop> <LoadMoreOnScroll {...props} /> </Device.TabletOrDesktop> </> ); }
101. function LoadMoreBaseOnDevice(props) { return ( <Device.Mobile> {isMobile => isMobile ? ( <LoadMoreButton {...props} /> ) : ( <LoadMoreOnScroll {...props} /> ) } </Device.Mobile> ); }
102. function LoadMoreBaseOnDevice(props) { const isMobile = useIsMobile(); return isMobile ? ( <LoadMoreButton {...props} /> ) : ( <LoadMoreOnScroll {...props} /> ); }
103. <Button onClick={(event) => click(event)} />
104. <Button onClick={(event) => click(event)} />
105. <Button onClick={click} />
106. function Component({ array }) { return ( <React.Fragment> {array && array.length > 0 && array.map(item => <Item item={item} />)} </React.Fragment> ); }
107. function Component({ array }) { return ( <React.Fragment> {array && array.length > 0 && array.map(item => <Item item={item} />)} </React.Fragment> ); }
108. function Component({ array }) { return ( <React.Fragment> {array && array.map(item => <Item item={item} />)} </React.Fragment> ); }
109. function Component({ array }) { return ( <React.Fragment> {array.map(item => <Item item={item} />)} </React.Fragment> ); }
110. function Component({ array }) { return ( <React.Fragment> {array.map(item => <Item item={item} />)} </React.Fragment> ); }
111. function Component({ array }) { return array.map(item => <Item item={item} />); }
112. <ABTest variant="newsletterForm"> {(variant, complete) => { return variant == 'left' ? ( viewer ? ( !viewer.isSubscribedToNewsletter && ( <SubscribeForm email={viewer.email} className={style.leftForm} contentClassName={styles.hideField} onSubscribe={complete} /> ) ) : ( <SubscribeForm className={styles.leftForm} onSubscribe={complete} /> ) ) : viewer ? ( !viewer.isSubscribedToNewsletter && ( <SubscribeForm email={viewer.email} className={style.topForm} contentClassName={styles.hideField} onSubscribe={complete} /> ) ) : ( <SubscribeForm className={styles.topForm} onSubscribe={complete} /> ); }} </ABTest>
113. <ABTest variant="newsletterForm"> {(variant, complete) => { return variant == 'left' ? ( viewer ? ( !viewer.isSubscribedToNewsletter && ( <SubscribeForm email={viewer.email} className={style.leftForm} contentClassName={styles.hideField} onSubscribe={complete} /> ) ) : ( <SubscribeForm className={styles.leftForm} onSubscribe={complete} /> ) ) : viewer ? ( !viewer.isSubscribedToNewsletter && ( <SubscribeForm email={viewer.email} className={style.topForm} contentClassName={styles.hideField} onSubscribe={complete} /> ) ) : ( <SubscribeForm className={styles.topForm} onSubscribe={complete} /> ); }} </ABTest>
114. <ABTest variant="newsletterForm"> {(variant, complete) => variant == 'left' ? ( viewer ? ( !viewer.isSubscribedToNewsletter && ( <SubscribeForm email={viewer.email} className={style.leftForm} contentClassName={styles.hideField} onSubscribe={complete} /> ) ) : ( <SubscribeForm className={styles.leftForm} onSubscribe={complete} /> ) ) : viewer ? ( !viewer.isSubscribedToNewsletter && ( <SubscribeForm email={viewer.email} className={style.topForm} contentClassName={styles.hideField} onSubscribe={complete} /> ) ) : ( <SubscribeForm className={styles.topForm} onSubscribe={complete} /> ) } </ABTest>;
115. #2 Too Much Conditional Logic
118. <ABTest variant="newsletterForm"> {(variant, complete) => variant == 'left' ? ( viewer ? ( !viewer.isSubscribedToNewsletter && ( <SubscribeForm email={viewer.email} className={style.leftForm} contentClassName={styles.hideField} onSubscribe={complete} /> ) ) : ( <SubscribeForm className={styles.leftForm} onSubscribe={complete} /> ) ) : viewer ? ( !viewer.isSubscribedToNewsletter && ( <SubscribeForm email={viewer.email} className={style.topForm} contentClassName={styles.hideField} onSubscribe={complete} /> ) ) : ( <SubscribeForm className={styles.topForm} onSubscribe={complete} /> ) } </ABTest>;
119. <ABTest variant="newsletterForm"> {(variant, complete) => variant == 'left' ? ( viewer ? ( !viewer.isSubscribedToNewsletter && ( <SubscribeForm email={viewer.email} className={style.leftForm} contentClassName={styles.hideField} onSubscribe={complete} /> ) ) : ( <SubscribeForm className={styles.leftForm} onSubscribe={complete} /> ) ) : viewer ? ( !viewer.isSubscribedToNewsletter && ( <SubscribeForm email={viewer.email} className={style.topForm} contentClassName={styles.hideField} onSubscribe={complete} /> ) ) : ( <SubscribeForm className={styles.topForm} onSubscribe={complete} /> ) } </ABTest>;
120. <ABTest variant="newsletterForm"> {(variant, complete) => variant == 'left' ? ( <SubscribeForm className={styles.leftForm} onSubscribe={complete} viewer={viewer} /> ) : ( <SubscribeForm className={style.topForm} onSubscribe={complete} viewer={viewer} /> ) } </ABTest>
121. <ABTest variant="newsletterForm"> {(variant, complete) => variant == 'left' ? ( <SubscribeForm className={styles.leftForm} onSubscribe={complete} viewer={viewer} /> ) : ( <SubscribeForm className={style.topForm} onSubscribe={complete} viewer={viewer} /> ) } </ABTest>
122. <ABTest variant="newsletterForm"> {(variant, complete) => ( <SubscribeForm className={variant === 'left' ? styles.leftForm : styles.topForm} onSubscribe={complete} viewer={viewer} /> )} </ABTest>
123. function Card({ card }) { if (card.type === 'news') { return <NewsCard card={card} />; } if (card.type === 'post') { return <PostCard card={card} />; } if (card.type === 'user') { return <UserCard card={card} />; } return <DefaultCard card={card} />; }
124. const CARDS = { news: NewsCard, post: PostCard, user: UserCard, }; function Card({ card }) { const Component = CARDS[card.type] || DefaultCard; return <Component card={card} />; }
125. function ShareButton({ sharable, medium }) { const icon = medium === 'twitter' ? <IconTwitter /> : <IconFacebook />; const onClick = () => { if (medium === 'facebook') { shareOnFacebook(sharable); } else { shareOnTwitter(sharable); } }; return ( <Button icon={medium.icon} title={`Share on ${capitalize(medium)}`} onClick={onClick} /> ); }
126. function ShareButton({ sharable, medium }) { const icon = medium === 'twitter' ? <IconTwitter /> : <IconFacebook />; const onClick = () => { if (medium === 'facebook') { shareOnFacebook(sharable); } else { shareOnTwitter(sharable); } }; return ( <Button icon={medium.icon} title={`Share on ${capitalize(medium)}`} onClick={onClick} /> ); }
127. const MEDIUMS = { twitter: { icon: <IconTwitter className={styles.twitter} />, title: 'Share on Twitter', share: shareOnTwitter, }, facebook: { icon: <IconFacebook className={styles.facebook} />, title: 'Share on Facebook', share: shareOnFacebook, }, }; function ShareButton({ sharable, medium }) { const medium = MEDIUMS[medium]; return ( <Button icon={medium.icon} title={medium.title} onClick={() => medium.share(sharable)} /> ); }
128. const MEDIUMS = { twitter: { icon: <IconTwitter className={styles.twitter} />, title: 'Share on Twitter', share: shareOnTwitter, }, facebook: { icon: <IconFacebook className={styles.facebook} />, title: 'Share on Facebook', share: shareOnFacebook, }, linkedin: { icon: <IconLinkedIn className={styles.linkedIn} />, title: 'Share on LinkedIn', share: shareOnLinkedIn, }, }; function ShareButton({ sharable, medium }) { const medium = MEDIUMS[medium]; return ( <Button icon={medium.icon} title={medium.title} onClick={() => medium.share(sharable)} />
129. interface IProps { sharable: ISharable; medium: keyof typeof MEDIUMS; }
130. http://blog.rstankov.com/replace-conditional-with-map-refactoring/
131. #3 Too DRY code
133. Good DRY
134. The bad side of DRY
135. const API_GET = '/api/:source_type/:id'; const API_GET_DETAILS = '/api/:source_type/:id/details'; const API_GET_VERSION = '/api/:source_type/:id/on/:year/:date/:month'; const API_GET_SUBTYPE = '/api/:source_type/:id/sub/:subtype/:subtype_id';
136. const API = 'api'; const SOURCE_ID = '/:id'; const SOURCE_DATE = '/:year/:month/:day'; const SUBTYPE = '/:subtype'; const SUBID = '/:subtype_id'; const API_GET = API + SOURCE_TYPE + SOURCE_ID; const API_GET_DETAILS = API + SOURCE_TYPE + SOURCE_ID + '/details'; const API_GET_VERSION = API + SOURCE_TYPE + SOURCE_ID + '/on' + SOURCE_DATE; const API_GET_SUBTYPE = API + SOURCE_TYPE + SOURCE_ID + '/sub' + SUBTYPE + SUBID;
137. function path(rest = '') { return `${BASE_PATH}${rest}`; } function token(string) { return `${SEPARATOR}${string}`; } const SEPARATOR = '/'; const API = 'api'; const SOURCE_TYPE = ':source_type'; const SOURCE_ID = ':id'; const YEAR = ':year'; const MONTH = ':month'; const DAY = ':day'; const SUBTYPE = ':subtype'; const SUBID = ':subtype_id'; const DETAILS = 'details'; const ON = 'on'; const SUB = 'sub'; const BASE_PATH = token(API) + token(SOURCE_TYPE) + token(SOURCE_ID); const DATE_PART = token(YEAR) + token(MONTH) + token(DAY); const SUB_PART = token(SUBTYPE) + token(SUBID); const API_GET = path(); const API_GET_DETAILS = path(token(DETAILS)); const API_GET_VERSION = path(token(ON) + token(DATE_PART)); const API_GET_SUBTYPE = path(token(SUB) + token(SUB_PART));
139. Don't repeat yourself (DRY) is a principle of software development aimed at reducing repetition of software patterns, replacing it with abstractions or using data normalization to avoid redundancy. Don't repeat yourself
140. The DRY principle is stated as "Every piece of knowledge must have a single, unambiguous, authoritative representation within a system" Don't repeat yourself
141. #4 Single Level of Abstraction
142. SLAP Single Level of Abstraction Principle SLAP
143. <Dropdown onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} />
144. <Drobdown trigger="click" /> <Dropdown trigger="hover" />
145. function Cart() { const [cart, setData] = useState<T>(selectData(DataSource)); const callback = useCallback(selectData, []); useEffect(() => { const removeChangeListener = DataSource.addChangeListener(() => setData(callback(DataSource)), ); return removeChangeListener; }, [callback]); return ( <aside> <h2> Cart <small>({cart.length})</small> </h2> <ul> {cart.map(item => ( <li key={item.product.id}> <CartItem item={item} /> </li> ))} </ul> </aside> ); }
146. function Cart() { const [cart, setData] = useState<T>(selectData(DataSource)); const callback = useCallback(selectData, []); useEffect(() => { const removeChangeListener = DataSource.addChangeListener(() => setData(callback(DataSource)), ); return removeChangeListener; }, [callback]); return ( <aside> <h2> Cart <small>({cart.length})</small> </h2> <ul> {cart.map(item => ( <li key={item.product.id}> <CartItem item={item} /> </li> ))} </ul> </aside> ); }
147. function Cart() { const [cart, setData] = useState<T>(selectData(DataSource)); const callback = useCallback(selectData, []); useEffect(() => { const removeChangeListener = DataSource.addChangeListener(() => setData(callback(DataSource)), ); return removeChangeListener; }, [callback]); return ( <aside> <h2> Cart <small>({cart.length})</small> </h2> <ul> {cart.map(item => ( <li key={item.product.id}> <CartItem item={item} /> </li> ))} </ul> </aside> ); }
148. function Cart() { const cart = useData(getCartData); return ( <aside> <h2> Cart <small>({cart.length})</small> </h2> <ul> {cart.map(item => ( <li key={item.product.id}> <CartItem item={item} /> </li> ))} </ul> </aside> ); }
149. function useData<T>(selectData: (data: DataSourceClass) => T): T { const [data, setData] = useState<T>(selectData(DataSource)); const callback = useCallback(selectData, []); useEffect(() => { const removeChangeListener = DataSource.addChangeListener(() => setData(callback(DataSource)), ); return removeChangeListener; }, [callback]); return data; }
151. ( Duplicated Code ) Long Method * Large Class + Long Parameter List , Shotgun Surgery - Feature Envy . Data Clumps / Case Statements 0 Parallel Inheritance Hierarchies 1 Speculative Generality 2 Temporary Field 3 Message Chains 4 Middle Man 5 Alternative Classes with Different Interfaces 6 Refused Bequest 7 Comments 8 Repetitive Boilerplate 9 God object ' : and more ...
156. Thanks ;
157. https://speakerdeck.com/rstankov