feat: migrate react-object-restructuring

public/blogs/ab-testing.mdx

@@ -8,7 +8,6 @@ lastModDate: 2024-01-14T09:15:00-0401
 firstModDate: 2024-01-14T09:15:00-0401
 minutesToRead: 5
 tags:
-  - 'A/B'
   - 'testing'
 ---
 

public/blogs/react-object-destructuring.mdx

@@ -0,0 +1,115 @@
+---
+title: React Object Destructuring
+seoTitle: Stop Object Destructuring in React with TypeScript It's an Anti-Pattern
+summary: Is an anti-paterrn with TypeScript, and you should stop using it
+isReleased: true
+isSequel: false
+lastModDate: 2021-12-27T09:15:00-0401
+firstModDate: 2021-12-27T09:15:00-0401
+minutesToRead: 3
+tags:
+  - 'react'
+  - 'typescript'
+  - 'anti-patterns'
+---
+<C>Do not do this </C>
+<Code
+  code={`export interface MyComponentProps {
+  onClick: () => void;
+  onAction: (action: Action) => void;
+  state: State;
+  title: string;
+}
+
+export function MyComponent({
+  onClick,,
+  onAction,
+  state,
+  titl,
+}: MyComponentProps): ReactElement {
+  return (
+    <div>
+      <h1>{title}</h1>
+    </div>
+  );
+}
+`}
+  language="tsx"
+  showLineNumbers={false}
+/>
+<C>And definitely not this </C>
+<Code
+  code={`export function MyComponent({
+  onClick,,
+  onAction,
+  state,
+  titl,
+}: {
+  onClick: () => void;
+  onAction: (action: Action) => void;
+  state: State;
+  title: string;
+}): ReactElement {
+  return (
+    <div>
+      <h1>{title}</h1>
+    </div>
+  );
+}
+`}
+  language="tsx"
+  showLineNumbers={false}
+/>
+<C>You're not in JS land anymore, so instead do this</C>
+<Code
+  code={`export interface MyComponentProps {
+  onClick: () => void;
+  onAction: (action: Action) => void;
+  state: State;
+  title: string;
+}
+
+export function MyComponent(props: MyComponentProps): ReactElement {
+  return (
+    <div>
+      <h1>{props.title}</h1>
+    </div>
+  );
+}
+`}
+  language="tsx"
+  showLineNumbers={false}
+/>
+<C>Here are (13-5) reasons why</C>
+
+<H2>Reason 1: Readability</H2>
+<C>
+The biggest drawback is that it can obscure the readability of a component's signature. When a function has multiple parameters, it is harder to discern the purpose of each parameter.
+This can become even more confusing when ``ReactElement`` is not explicitly defined in an interface or type.
+</C>
+
+<H2>Reason 2: Performance</H2>
+<C>
+
+Property destructuring can create unnecessary object copies, this heavily impacts performance in large components.
+</C>
+
+
+<H2>Reason 3: Where it came from? What does it represent?</H2>
+<C>
+
+In large React components with complex state management. I want to understand where variables originate from. Using property destructuring  obscures the source of a variable, this makes things more confusing that they have to, what is it?  Is it a prop? state? event? parameter? Bird ? I don't know.
+</C>
+
+
+<H2>Reason 3: Reusability with Child Components and Functions</H2>
+<C>
+
+Do you really have to rebuild the whole object to pass it to a child component again? No
+</C>
+<H2>Reason 4: Name Conflicts with local variables</H2>
+<H2>Reason 5: Complexity with Deep Nesting</H2>
+<H2>Reason 6: No IntelliSense</H2>
+<H2>Reason 7: DX</H2>
+
+