From 22b2f18f7f595319847b277ad54469d7422365b5 Mon Sep 17 00:00:00 2001
From: Ihor Honcharenko <102293862+qoa11a@users.noreply.github.com>
Date: Tue, 31 Oct 2023 15:02:08 +0200
Subject: [PATCH] [Update mate-frontend.md]: Add a paragraph about creating new
 components for A/B tests (#39)

---
 mate-frontend.md | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/mate-frontend.md b/mate-frontend.md
index 8bc2f39..3a77f43 100644
--- a/mate-frontend.md
+++ b/mate-frontend.md
@@ -5,6 +5,7 @@
 - [1. General](#1-general)
     - [1.1. Always add NoSSR to AuthUser query on landings](#11-always-add-nossr-to-authuser-query-on-landings)
     - [1.2. Rename old components before refactoring](#12-rename-old-components-before-refactoring)
+    - [1.3. Create new components for A/B tests](#13-create-new-components-for-ab-tests)
 - [2. CSS](#2-css)
     - [2.1. Use `rem-calc` function for "size" and "indent" values instead of hardcoding pixels](#21-use-rem-calc-function-for-size-and-indent-values-instead-of-hardcoding-pixels)
     - [2.2. Use `em` units for font-related properties](#22-use-em-units-for-font-related-properties)
@@ -51,6 +52,34 @@ export const ChatDeprecated: FC<Props> // ...
 export const Chat: FC<Props> // ...
 ```
 
+#### 1.3. Create new components for A/B tests
+When we run A/B tests, there's often a need to create new components. It's better to create new components instead of adding new props to existing ones. It will be easier to clean up afterward
+
+But how to handle naming in this case? Adding the `Deprecated` suffix doesn't seem right because the component doesn't become deprecated. The best solution is to add `V1`, `V2`, and so on suffixes to a new component, where `V[number]` stands for the variant of the test
+
+```jsx
+// ❌ bad
+// old component - components/Chat/Chat.tsx
+export const Chat: FC<Props> // ...
+
+// new component - components/ChatNew/ChatNew.tsx
+export const ChatNew: FC<Props> // ...
+
+// ❌ bad
+// old component - components/ChatDeprecated/ChatDeprecated.tsx
+export const ChatDeprecated: FC<Props> // ...
+
+// new component - components/Chat/Chat.tsx
+export const Chat: FC<Props> // ...
+
+// ✅ good
+// old component - components/Chat/Chat.tsx
+export const Chat: FC<Props> // ...
+
+// new component - components/ChatV[1,2,3]/ChatV[1,2,3].tsx
+export const ChatV1: FC<Props> // ...
+```
+
 ## 2. CSS
 
 #### 2.1. Use `rem-calc` function for "size" and "indent" values instead of hardcoding pixels