44:["$","title",null,{"children":"React Component Architecture | Steven Robison | Observable"}] 4c:T5d4,md`--- ### Component paterns One way we can organise our app is into smart and dumb components (a.k.a. container & presentational components). This seperates complex logic from UI. Dumb components are small, take an input, do minimal work and then return some UI output. They are easy to test and reason about. Smart components reside at the top level and do most of the heavy lifting. In PM UI we are somewhat following this pattern and have smart components at the top level that fetch data, parse the JSON response, etc. (e.g. \`\`FeedsPage.jsx\`\`) > ##### Tip > Most of these type of components can currently be found in the '\`\`router\`\`' directory in PM UI whilst "dumb" components are mainly found in the '\`\`components\`\`' directory. Although this may change in the future Specialised tasks have to happen somewhere so keeping them in smart components and sepearete from the UI makes the dumb components readily reusable. This is kind of like pure core, impure shell. Smart components aren't concerned with displaying rendering UI so typically orchestrate some state and marshal it into props of custom components. I've personally found this a useful pattern in the past but there are many others! React hooks offer an alternative to the smart and dumb components pattern as they allow for the same seperation of concerns. It would be good to investigate this further and see if it would fit our needs as it's endorsed by the React team (although it is _relatively_ new) `4d:T470,md `--- ### [It do go down](https://youtu.be/DYzT-Pk6Ogw) Data flows "down" in React. A component may choose to pass its state down as props to its child components \`\`\` function ParentComponent(props) { const [date, setDate] = useState(new Date()); return ; } function FormattedDate(props) { return

It is {props.date.toLocaleTimeString()}.

; } \`\`\` The \`\`FormattedDate\`\` component would receive the date in its props and wouldn’t know whether it came from the parent’s state, from the parent’s props, or was typed by hand. Any state is always owned by some specific component, and any data or UI derived from that state can only affect components **below** them in the tree. Never up. This is called uniderectional data flow **So how can components affect one another and not just their children?** These componenets must share some common ancestorage. The parent component can pass a function as a property into a child component. When the function is called from the child component it can affect the parent component and so also affect a different child. `4e:[{"id":"04b6ce8f770c708e0d7f80458f83959d9878aa1e0cbac281bbebc394fc601b06f27832752c96ae6a86939997807b38b70d8df86fea95d958998a8afaac074cc0","href":"https://static.observableusercontent.com/files/04b6ce8f770c708e0d7f80458f83959d9878aa1e0cbac281bbebc394fc601b06f27832752c96ae6a86939997807b38b70d8df86fea95d958998a8afaac074cc0","name":"exercise","type":"image/png","lastModified":1586287067542.33,"size":36081}] 48:{"id":"e7798a57c8ef4f0a","slug":"react-component-architecture","title":"React Component Architecture","thumbnail":"7d70b97276e2fdeba91eb5af420142fc5b153d9d2cccf16e1f5a223e1dc93ede","access_level":"public","create_time":"$D2020-04-06T15:01:35.185Z","update_time":"$D2020-04-07T20:34:26.885Z","view_time":null,"first_public_time":"$D2020-04-07T14:37:58.386Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"886c43393cb620b8","login":"sgr","name":"Steven Robison","avatar_url":"https://avatars-next.observableusercontent.com/2d5ce11d04a6ee71aa134a8fed2bb09e2a1a5e7ac016cbf6e8960e7776535e30","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":152,"publish_version":152,"role":null,"authored":false,"authors":[{"type":"individual","id":"a275b212c4a7db45","login":"sgr","name":"Steven Robison","avatar_url":"https://avatars-next.observableusercontent.com/2d5ce11d04a6ee71aa134a8fed2bb09e2a1a5e7ac016cbf6e8960e7776535e30","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"a275b212c4a7db45","login":"sgr","name":"Steven Robison","avatar_url":"https://avatars-next.observableusercontent.com/2d5ce11d04a6ee71aa134a8fed2bb09e2a1a5e7ac016cbf6e8960e7776535e30","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"36c10a92785fefc1","slug":"insyn-pm-ui-refresher","title":"InSyn PM UI Refresher 🦎 🍭","owner":{"id":"886c43393cb620b8","login":"sgr","name":"Steven Robison"}},"type":"notebook","body":{"titling":"auto","title":"React Component Architecture","cells":[{"id":0,"value":"md`# React Component Architecture\n\nWe split complex components into smaller more managable components. This helps maintainability, reusability and sepration of concerns. When multiple components share the same piece of state we can lift this state into a higher component so that we aren't repeating it.\n\n> #### Exercise\n> In this example the day of the week is shared between \\`\\`DayDisplayer\\`\\` and \\`\\`Schedule\\`\\`. We don't want to maintain it in two places. \n> Refactor the \\`\\`App\\`\\` component to share this state using \\`\\`state\\`\\` and \\`\\`props\\`\\`.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"function DayDisplayer() {\n const [day, setDay] = useState(\"Saturday\")\n \n return jsx`

It is ${day}

${day == \"Saturday\" ? \"Relax\" : \"Do not relax\"}

\n <${DayDisplayer} />\n <${Schedule} />\n

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"render(() => jsx`<${App} />`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"md`\n> #### Exercise\n> Can you recreate the following diagram with components?\n\n> *Remember JSX is wierd in these notebooks and needs a \\`\\`$\\`\\` before curly braces*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"FileAttachment(\"exercise\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"md`> heres a skeleton to get you started. It will run beneath`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"function NameInput() {\n\n return jsx``;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"function NameDisplay() {\n\n return jsx`