From 808eb540a70e7ef9f080b6ab709f612db45cef17 Mon Sep 17 00:00:00 2001
From: Mihir Shah <48630359+MihirGH@users.noreply.github.com>
Date: Wed, 26 Oct 2022 03:14:20 +0530
Subject: [PATCH] chore: convert PlaceholderText component to functional
 component (#4204) (#4336)

---
 app/components/PlaceholderText.tsx | 24 +++++++-----------------
 1 file changed, 7 insertions(+), 17 deletions(-)

diff --git a/app/components/PlaceholderText.tsx b/app/components/PlaceholderText.tsx
index b977e12f7..bd4c74749 100644
--- a/app/components/PlaceholderText.tsx
+++ b/app/components/PlaceholderText.tsx
@@ -12,23 +12,11 @@ export type Props = {
   delay?: number;
 };
 
-class PlaceholderText extends React.Component<Props> {
-  width = randomInteger(this.props.minWidth || 75, this.props.maxWidth || 100);
+function PlaceholderText({ minWidth, maxWidth, ...restProps }: Props) {
+  // We only want to compute the width once so we are storing it inside ref
+  const widthRef = React.useRef(randomInteger(minWidth || 75, maxWidth || 100));
 
-  shouldComponentUpdate() {
-    return false;
-  }
-
-  render() {
-    return (
-      <Mask
-        width={this.width}
-        height={this.props.height}
-        delay={this.props.delay}
-        header={this.props.header}
-      />
-    );
-  }
+  return <Mask width={widthRef.current} {...restProps} />;
 }
 
 const Mask = styled(Flex)<{
@@ -51,4 +39,6 @@ const Mask = styled(Flex)<{
   }
 `;
 
-export default PlaceholderText;
+// We don't want the component to re-render on any props change
+// So returning true from the custom comparison function to avoid re-render
+export default React.memo(PlaceholderText, () => true);