Part II: Ease change, future-proof component code

1. State management
2. Loosely Coupled Component
3. Components decomposition patterns
4. Enable React warning and keep your dependencies up-to-date

• new features
• existing features evolution
• bug fixing
• dependencies updates

1. State management
2. Loosely Coupled Component
3. Components decomposition patterns
4. Enable React warning and keep your dependencies up-to-date

1. State management

If you start building an app

If you already have an existing app

• keep state as local as possible by using useState()
• use React.Context to avoid prop-drilling
• use redux/mobx only for the application-level state (configuration, session)

2. Loosely Coupled Component

• i. The loss of the Container/View pattern?
• ii. Coupling at the data manipulation-level

i. The loss of the Container/View pattern?

1import * as React from "react";
2import gql from "graphql-tag";
3import { DateTime } from "luxon";
4import { useQuery } from "@apollo/react-hooks";
5import { sortBy } from "lodash";
6
7import "./style.css";
8
9const GET_CONVERSATIONS = gql`
10  query getConversations {
11    conversations {
12      id
13      user {
14        first_name
15        avatar_name
16        timezone
17      }
18      messages {
19        id
20        text
21        voice
22        media
23        date_time
24      }
25    }
26  }
27`;
28
29interface Conversation {
30  id: number;
31  user: {
32    first_name: string;
33    avatar_name: string;
34    timezone: string;
35  };
36  messages: Message[];
37}
38
39interface Message {
40  id: number;
41  text: string;
42  voice: boolean;
43  media: boolean;
44  date_time: string;
45}
46
47interface getConversations {
48  conversations: Conversation[];
49}
50
51const lastMessage = (conversation: Conversation): Message =>
52  conversation.messages[0];
53
54const Chat: React.SFC = () => {
55  const [runQuery, setRunQuery] = React.useState(false);
56  const { data } = useQuery<getConversations>(GET_CONVERSATIONS, {
57    skip: !runQuery
58  });
59
60  // ...
61};
62
63export default Chat;

• Handle the display logic accordingly to the product design system definition

• Handle UI interactions

1import * as React from "react";
2import gql from "graphql-tag";
3import { useQuery } from "@apollo/react-hooks";
4import { DateTime } from "luxon";
5import { sortBy } from "lodash";
6
7const GET_CONVERSATIONS = gql`
8  query getConversations {
9    conversations {
10      id
11      user {
12        first_name
13        avatar_name
14        timezone
15      }
16      messages {
17        id
18        text
19        voice
20        media
21        date_time
22      }
23    }
24  }
25`;
26
27export interface User {
28  first_name: string;
29  avatar_name: string;
30  timezone: string;
31}
32
33export interface Conversation {
34  id: number;
35  user: User;
36  messages: Message[];
37}
38
39export interface Message {
40  id: number;
41  text: string;
42  voice: boolean;
43  media: boolean;
44  date_time: string;
45}
46
47export interface getConversations {
48  conversations: Conversation[];
49}
50
51export const isNew = (conversation: Conversation) => conversation.id === 1;
52export const isAudio = (message: any) => message.voice;
53export const isMedia = (message: any) => message.media;
54export const lastMessage = (conversation: Conversation): Message =>
55  conversation.messages[0];
56
57export const userTimes = (user: User) => [
58  Math.ceil(
59    parseInt(
60      DateTime.local()
61        .setZone(user.timezone)
62        .toFormat("HH"),
63      10
64    )
65  ),
66  DateTime.local().diff(
67    DateTime.local().setZone(user.timezone, {
68      keepLocalTime: true
69    }),
70    "hours"
71  ).hours
72];
73
74export const useGetConversations = (): Conversation[] | null => {
75  const [runQuery, setRunQuery] = React.useState(false);
76  const { data } = useQuery<getConversations>(GET_CONVERSATIONS, {
77    skip: !runQuery
78  });
79
80  // 💩hack to fake a loading...
81  React.useEffect(() => {
82    setTimeout(() => setRunQuery(true), 2000);
83  });
84
85  return data
86    ? sortBy(
87        data.conversations,
88        (c: Conversation) =>
89          -DateTime.fromISO(lastMessage(c).date_time).toMillis()
90      )
91    : null;
92};

1import * as React from "react";
2import {
3  useGetConversations,
4  Conversation as tConversation
5} from "./getConversations";
6import Conversation from "./Conversation/index";
7
8import "./style.css";
9
10const Chat: React.SFC = () => {
11  const conversations = useGetConversations();
12
13  // ...
14}

• no longer aware of the underlying data fetching implementation
• no longer responsible for data related logic (sorting, etc.)
• has free space to welcome UI related complexity (state, logic, etc.)

ii. Coupling at the data manipulation-level

1import * as React from "react";
2import { DateTime } from "luxon";
3import {
4  lastMessage as getLastMessage,
5  Conversation as tConversation,
6} from "../getConversations";
7
8interface Props {
9  conversation: tConversation;
10  children?: React.ReactNode;
11}
12
13const Conversation: React.SFC<Props> = ({ conversation }) => {
14  const lastMessage = getLastMessage(conversation);
15  const userTime = Math.ceil(
16    parseInt(
17      DateTime.local()
18        .setZone(conversation.user.timezone)
19        .toFormat("HH"),
20      10
21    )
22  )
23  const userTimeDiff = DateTime.local().diff(
24    DateTime.local().setZone(conversation.user.timezone, {
25      keepLocalTime: true
26    }),
27    "hours"
28  ).hours
29
30  return (
31    <div
32      key={`conversation-${conversation.id}`}
33      className={isNew(conversation) ? "conversation --is-new" : "conversation"}
34    >
35      <img
36        className={"conversationAvatar"}
37        alt={""}
38        src={`/images/humaaans/${conversation.user.avatar_name}@2x.png`}
39      />
40      <div className="conversationContent">
41        <div className={"conversationTitle"}>
42          {conversation.user.first_name}
43        </div>
44        <div className={"conversationMessage"}>
45          {lastMessage.media ? (
46            <div>
47              <i className="fas fa-photo-video" />
48              &nbsp;
49              <em>shared a media</em>
50            </div>
51          ) : lastMessage.audio ? (
52            <div>
53              <i className="fas fa-microphone" />
54              &nbsp;
55              <em>Voice message (3:10)</em>
56            </div>
57          ) : (
58            <div>{lastMessage.text}</div>
59          )}
60        </div>
61      </div>
62      {(userTime < 6 || userTime > 19) && (
63        <div
64          className={"conversationUserNightTime"}
65          title={
66            !!userTimeDiff
67              ? `${
68                  userTimeDiff > 0 ? `+ ${userTimeDiff}` : `- ${userTimeDiff}`
69                } hours`
70              : "Same timezone"
71          }
72        >
73          <i className="fas fa-moon" />
74        </div>
75      )}
76      <div className={"conversationDate"}>
77        {DateTime.fromISO(lastMessage.date_time).toRelative()}
78      </div>
79    </div>
80  );
81};
82
83export default Conversation;

• lines 14–28: derived data from props is polluting component’s body
• lines 45, 51: business rules of defining what is a “conversation type” is inlined in the rendering logic, making it very fragile to changes

1import * as React from "react";
2import { DateTime } from "luxon";
3import {
4  isNew,
5  isMedia,
6  isAudio,
7  lastMessage as getLastMessage,
8  Conversation as tConversation,
9  userTimes
10} from "../getConversations";
11
12interface Props {
13  conversation: tConversation;
14  children?: React.ReactNode;
15}
16
17const Conversation: React.SFC<Props> = ({ conversation }) => {
18  const lastMessage = getLastMessage(conversation);
19  const [userTime, userTimeDiff] = userTimes(conversation.user);
20
21  return (
22    <div
23      key={`conversation-${conversation.id}`}
24      className={isNew(conversation) ? "conversation --is-new" : "conversation"}
25    >
26      <img
27        className={"conversationAvatar"}
28        alt={""}
29        src={`/images/humaaans/${conversation.user.avatar_name}@2x.png`}
30      />
31      <div className="conversationContent">
32        <div className={"conversationTitle"}>
33          {conversation.user.first_name}
34        </div>
35        <div className={"conversationMessage"}>
36          {isMedia(lastMessage) ? (
37            <div>
38              <i className="fas fa-photo-video" />
39              &nbsp;
40              <em>shared a media</em>
41            </div>
42          ) : isAudio(lastMessage) ? (
43            <div>
44              <i className="fas fa-microphone" />
45              &nbsp;
46              <em>Voice message (3:10)</em>
47            </div>
48          ) : (
49            <div>{lastMessage.text}</div>
50          )}
51        </div>
52      </div>
53      {(userTime < 6 || userTime > 19) && (
54        <div
55          className={"conversationUserNightTime"}
56          title={
57            !!userTimeDiff
58              ? `${
59                  userTimeDiff > 0 ? `+ ${userTimeDiff}` : `- ${userTimeDiff}`
60                } hours`
61              : "Same timezone"
62          }
63        >
64          <i className="fas fa-moon" />
65        </div>
66      )}
67      <div className={"conversationDate"}>
68        {DateTime.fromISO(lastMessage.date_time).toRelative()}
69      </div>
70    </div>
71  );
72};
73
74export default Conversation;

• <Conversation /> does not know what makes a conversation “audio” or “media”, breaking changes won’t directly impact the component which now relies on data helpers
• <Conversation /> body is cleaner with derived data from props being computed by a helper userTimes() exposed by getConversations.ts

• **Using custom hooks is a good alternative to the Container/View pattern.
  **Let your component focus on the UI aspect.
• By ensuring your component relies directly only on data that is displayed, otherwise, use a business logic helper or custom hooks.

3. Component decomposition patterns

• Prefer duplication over wrong abstraction
• Well defined/split components

i. Prefer duplication over wrong abstraction

• The abstraction component (ex: <EditableContent record={record} /> ) contains some specific conditions:

1if (record.\_\_typename === "...") { /\* render this \*/ }  
2else { /\* render that \*/ }

• Your abstraction exposes many props in order to be configurable
  Combo: configuration props are inter-dependent (compounded)
• Your abstraction is based on class inheritance

• Your abstraction embed common UI pattern and provides props to configure the business logic outside of it
  (ex: <AddToList listName={} onSelect={} />)
• UI-kit is a good example of good abstraction
  Helping scaling CSS code and also bringing consistency in the UI by avoiding issue brought by code duplication

• Defining “abstract component” (like <Button />, <Avatar /> ) for UI patterns
• Relying on custom hooks for custom logic and define shared/common ones if the complexity remains low (not specificity conditions, etc.)

ii. Well defined/split components

• List/Item: Given a UI listing element, you will have at least two components, a list component, and item component
• Button/Action: Encapsulate action logic in a dedicated component
• Pop-over: Add “target” component triggers the display of another (hover, click)

• <ArticlesTab />: 
  top component (not outlined)
• <OnboardingNotice />
• <ArticleTypeFilters />
• <ArticleSearch />
• <ArticlesList /> 
  Articles container (not outlined)
• <Article /> 
  Article item
• <ArticlesListPagination />

• <ArticlesTab /> will handle the state of the current search and current selected articleType
• We will need a new component (<Articles />), not linked to the UI, that will handle the state (pagination, querying data) for a given search and articleType 
  (<ArticlesListPagination> could also be moved inside _<ArticlesList>_ )
• Finally, <OnboardingNotice /> will handle its state independently using persistent storage (ex:localStorage) to determine whenever or not it should display a notice

1<ArticlesTabs>
2    {/* state: type + search */}
3    <OnboardingNotice />
4    <ArticleTypeFilters />
5    <ArticleSearch />
6    <Articles type={} search={}>
7        {/* state: data + pagination */}
8        <Article article={} />
9        <ArticlesListPagination onSelect={} />
10    </Articles>
11</ArticlesTabs>

4. Enable React warning and keep your dependencies up-to-date

React Strict Mode

• Identifying components with unsafe lifecycles
• Warning about legacy string ref API usage
• Warning about deprecated findDOMNode usage
• Detecting unexpected side effects
• Detecting legacy context API

Update your dependencies, as often as possible

Conclusion

• Custom hooks are an excellent alternative to the Container/View pattern, let your component focus on UI aspects.
• Ensure your component relies directly only on data that is displayed; otherwise, use a business logic helper, custom hooks.
• Beware of bad abstractions; they are the most likely to prevent change.
• Decomposition patterns and the UI provided by your Product Designer are a good starting point to build well-defined components