ReactJS- With Types and Hooks

The presentation shares a story on how Gumroad is migrating from FlightJS to ReactJS making use of Hooks and Typescript.

Transcript

1. Vipul A M TYPES & HOOKS WITH
2. @vipulnsward Saeloun Inc
5. @ReactPune https://www.meetup.com/ReactJS-and-Friends/ 3.2k+
6. https://www.meetup.com/ReactJS-and-Friends/
8. WITH TYPES & HOOKS
12. - Separation of Concerns - No direct interaction between components -Events broadcasted on a global level
14. Snappy and Lightweight
16. Unmaintained: Last commit 20 Jun 2017
18. - Big Churn -Large codebases are confusing - Changes at a lot of places - Harder to make change
19. FlightJS
20. Introducing React
21. @goshakkk Gosha Arinich
22. Product Edit
23. Purchase Flow- Before
24. After
25. React Bits!
26. - No Big rewrites - Start small -Breaking down existing files
27. Co-location
28. Components + calls from Flight
29. "use strict"; import React from "react"; import { useOnChange } from "$app/components/useOnChange"; import { CustomFieldRow } from "./row"; const ADD_FIELD = "add-field"; const REMOVE_FIELD = "remove-field"; const CHANGE_NAME = "change-name"; const CHANGE_IS_REQUIRED = "change-is-required"; const RESET = "reset"; const customFieldsReducer = (state, action) => { switch (action.type) { case ADD_FIELD: { return [...state, { name: "", required: false }]; } case REMOVE_FIELD: { return state.filter((_, idx) => idx !== action.index); } case CHANGE_NAME: { return state.map((fld, idx) => { if (idx === action.index) { return { ...fld, name: action.newName }; } return fld; }); } case CHANGE_IS_REQUIRED: { return state.map((fld, idx) => { if (idx === action.index) { return { ...fld, required: action.newValue }; } return fld; }); } case RESET: { return action.customFields; } default: return state; } }; const CustomFields = ({ customFields, onStateChange }) => { const [customFieldsState, dispatch] = React.useReducer( customFieldsReducer, customFields, customFields => customFields.length === 0 ? [{ name: "", required: false }] : customFields ); const isInitial = React.useRef(true); React.useEffect(() => { onStateChange( customFieldsState.filter(field => field.name.length > 0), isInitial.current ); isInitial.current = false; }, [customFieldsState]); useOnChange(() => { isInitial.current = true; dispatch({ type: RESET, customFields }); }, [customFields]); return ( <React.Fragment> {customFieldsState.map((field, idx) => ( <CustomFieldRow key={idx} name={field.name} isRequired={field.required} onChangeName={newName => dispatch({ type: CHANGE_NAME, index: idx, newName }) } onChangeIsRequired={newValue => dispatch({ type: CHANGE_IS_REQUIRED, index: idx, newValue }) } onRemove={() => dispatch({ type: REMOVE_FIELD, index: idx })} /> ))} <button type="button" className="button-small button-default" onClick={() => dispatch({ type: ADD_FIELD })} > {I18n.t("js.add_custom_field_button_label")} </button> </React.Fragment> ); }; export { CustomFields };
31. const CustomFields = ({ customFields, onStateChange }) => { const [customFieldsState, dispatch] = React.useReducer( customFieldsReducer, customFields, customFields => customFields.length === 0 ? [{ name: "", required: false }] : customFields ); const isInitial = React.useRef(true); React.useEffect(() => { onStateChange( customFieldsState.filter(field => field.name.length > 0), isInitial.current ); isInitial.current = false; }, [customFieldsState]); useOnChange(() => { isInitial.current = true; dispatch({ type: RESET, customFields }); }, [customFields]); };
32. <React.Fragment> {customFieldsState.map((field, idx) => ( <CustomFieldRow key={idx} name={field.name} isRequired={field.required} onChangeName={newName => dispatch({ type: CHANGE_NAME, index: idx, newName }) } onChangeIsRequired={newValue => dispatch({ type: CHANGE_IS_REQUIRED, index: idx, newValue }) } onRemove={() => dispatch({ type: REMOVE_FIELD, index: idx })} /> ))} <button type="button" className="button-small button-default" onClick={() => dispatch({ type: ADD_FIELD })} > {I18n.t("js.add_custom_field_button_label")} </button> </React.Fragment>
33. const ADD_FIELD = "add-field"; const REMOVE_FIELD = "remove-field"; const CHANGE_NAME = "change-name"; const CHANGE_IS_REQUIRED = "change-is-required"; const RESET = "reset"; const customFieldsReducer = (state, action) => { switch (action.type) { case ADD_FIELD: { .... } case REMOVE_FIELD: { .... } case CHANGE_NAME: { ... } case CHANGE_IS_REQUIRED: { .... } case RESET: { ... } default: return state; } };
34. this.renderCustomFieldsComponent = function(customFields) { const customFieldsRoot = document.getElementById("custom_fields_root"); // There isn't much that can go wrong here, but in case something does, // let's log the error and show a message to the user in place of the component. // Error boundary is like a "try-catch" for components. ReactDOM.render( <ErrorBoundary placeholder={<p>{I18n.t("js.error_placeholder")}</p>}> <CustomFields customFields={customFields} onStateChange={(newState, isInitial) => { this.attr.customFieldsState = newState; if (!isInitial) { this.updateCustomFieldsInputs(); } this.trigger("uiUpdateCurrentProductPageTabHeight"); }} /> </ErrorBoundary>, customFieldsRoot ); };
35. Breaking down commits:
36. Introduction in 2019: Skipping Classes & using Hooks
37. Moving side effects and event handlers and listeners to hooks
38. // Behaves like `useEffect`, except isn't not called on the first render. export function useOnChange(cb, deps) { const isFirstRender = React.useRef(true); React.useEffect(() => { if (isFirstRender.current === false) { cb(); } else { isFirstRender.current = true; } }, deps); }
39. Error Boundary and others for free
40. class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // Update state so the next render will show the fallback UI. return { hasError: true }; } componentDidCatch(error, errorInfo) { console.error(error); } render() { if (this.state.hasError) { return this.props.placeholder; } return this.props.children; } } export { ErrorBoundary };
41. Side-Effect> Moving to typescript with effectively defined data structures
42. const ADD_FIELD = "add-field"; const REMOVE_FIELD = "remove-field"; const CHANGE_NAME = "change-name"; const CHANGE_IS_REQUIRED = "change-is-required"; const RESET = "reset"; const customFieldsReducer = (state, action) => { switch (action.type) { case ADD_FIELD: { .... } case REMOVE_FIELD: { .... } case CHANGE_NAME: { ... } case CHANGE_IS_REQUIRED: { .... } case RESET: { ... } default: return state; } };
43. type CustomField = { name: string; required: boolean }; type State = Array<CustomField>; type Action = | { type: "add-field" } | { type: "remove-field"; index: number } | { type: "change-name"; index: number; newName: string } | { type: "change-is-required"; index: number; newValue: boolean } | { type: "reset"; customFields: Array<CustomField> }; const customFieldsReducer = (state: State, action: Action): State => { switch (action.type) { case "add-field": { .. } case "remove-field": { ... } case "change-name": { ... } case "change-is-required": { ... } case "reset": { ... } default: return state; } };
44. Documentation => Types
46. type FilesAction = | { type: "start-file-upload"; fileEntry: FileEntry } | { type: "update-file-upload-progress"; fileId: string; progress: UploadProgress; } | { type: "finish-file-upload"; fileId: string } | { type: "add-existing-file"; fileEntry: FileEntry } | { type: "upsert-dropbox-files"; fileEntries: Array<FileEntry> } | { type: "remove-file"; fileId: string } | { type: "rename-file"; fileId: string; newName: string } | { type: "cancel-file-upload"; fileId: string } | { type: "upload-subtitle-files"; fileId: string; subtitleFiles: Array<DOMFile>;} | { type: "start-subtitle-upload"; fileId: string; subtitleEntry: SubtitleFile; } | { type: "update-subtitle-upload-progress"; fileId: string; subtitleUrl: string; progress: UploadProgress; } | { type: "finish-subtitle-upload"; fileId: string; subtitleUrl: string } | { type: "cancel-subtitle-upload"; fileId: string; subtitleUrl: string } | { type: "remove-subtitle"; fileId: string; subtitleUrl: string } ...
47. Consideration: Build Size
50. Consideration: Speed
51. Consideration: Team onboarding
52. Consideration: Churn
53. Consideration: Error Reductions
54. Products created over time (red = distinct creators)
55. THANK YOU https://speakerdeck.com/vipulnsward/reactjs-with-types-and-hooks
56. @vipulnsward @HiSaeloun