convert to a simple var

src/components/DisplayNames/DisplayNamesWithTooltip.js

@@ -1,6 +1,7 @@
-import React, {Fragment, useCallback, useEffect, useRef, useState} from 'react';
+import React, {Fragment, useCallback, useRef} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
+import lodashGet from 'lodash/get';
 import styles from '../../styles/styles';
 import Text from '../Text';
 import Tooltip from '../Tooltip';
@@ -10,13 +11,7 @@ import {defaultProps, propTypes} from './displayNamesPropTypes';
 function DisplayNamesWithToolTip(props) {
  const containerRef = useRef(null);
  const childRefs = useRef([]);
- const [isEllipsisActive, setIsEllipsisActive] = useState(false);
-
- useEffect(() => {
- setIsEllipsisActive(
- containerRef.current && containerRef.current.offsetWidth && containerRef.current.scrollWidth && containerRef.current.offsetWidth < containerRef.current.scrollWidth,
- );
- }, []);
+ const isEllipsisActive = lodashGet(containerRef.current, 'offsetWidth') < lodashGet(containerRef.current, 'scrollWidth');
 
  /**
  * We may need to shift the Tooltip horizontally as some of the inline text wraps well with ellipsis,