I would like to know if there is a way to append another react ponent to the useRef element?

Scenario: when the Parent's useEffect detects the Child's heading to be bigger than X size: add another react ponent.

• I would like the implementation to be on the Parent, because in my whole app, there was only one specific case where I need to do this. Therefore I did not want to modify the core Child ponent props.

import React, { ReactNode, useEffect, useRef } from 'react';
import { css } from 'emotion';

const someStyle = css`
   background-color: red;
`;

type ChildProp = {
    children: ReactNode;
};
const Child = React.forwardRef<HTMLHeadingElement, ChildProp>(
    ({ children }, ref) => {
        return <h1>{children}</h1>;
    },
);

const Parent = React.FunctionComponent = ()=> {
        const childRef = useRef<HTMLHeadingElement>(null);

        useEffect(() => {
            if (childRef.current && childRef.current.clientHeight > 30) {
                // append ponent to childRef.current
                // e.g. childRef.current.append(<div className={someStyle}>hello</div>);
            }
        }, []);

        return <Child ref={childRef}>hello world</Child>;
};

export default Parent;

I would like to know if there is a way to append another react ponent to the useRef element?

Scenario: when the Parent's useEffect detects the Child's heading to be bigger than X size: add another react ponent.

• I would like the implementation to be on the Parent, because in my whole app, there was only one specific case where I need to do this. Therefore I did not want to modify the core Child ponent props.

import React, { ReactNode, useEffect, useRef } from 'react';
import { css } from 'emotion';

const someStyle = css`
   background-color: red;
`;

type ChildProp = {
    children: ReactNode;
};
const Child = React.forwardRef<HTMLHeadingElement, ChildProp>(
    ({ children }, ref) => {
        return <h1>{children}</h1>;
    },
);

const Parent = React.FunctionComponent = ()=> {
        const childRef = useRef<HTMLHeadingElement>(null);

        useEffect(() => {
            if (childRef.current && childRef.current.clientHeight > 30) {
                // append ponent to childRef.current
                // e.g. childRef.current.append(<div className={someStyle}>hello</div>);
            }
        }, []);

        return <Child ref={childRef}>hello world</Child>;
};

export default Parent;

• javascript
• reactjs
• append
• ref
• use-effect

• You don't manipulate the DOM; with React you use conditional rendering: return <Child>hello world {childRef.current.clientHeight > 30 && <div>...</div>}</Child>; – user5734311 Commented Jul 2, 2020 at 0:50

1 Answer 1

You should not manually manipulate the dom. React makes the assumption that it's the only one changing the page, so if that assumption is false it may make changes which overwrite yours, or skip changes that it doesn't realize it needs to do.

Instead, you should set state, causing the ponent to rerender. Then render something that matches what you want the dom to look like.

const Parent = React.FunctionComponent = ()=> {
  const childRef = useRef<HTMLHeadingElement>(null);
  const [large, setLarge] = useState(false);

  useEffect(() => {
    if (childRef.current && childRef.current.clientHeight > 30) {
      setLarge(true);
    }
  }, []);

  return (
    <React.Fragment>
      <Child ref={childRef}>hello world</Child>
      {large && (<div className={someStyle}>hello</div>)}
    </React.Fragment>
  )
};

P.S: If you see the screen flicker with this code, consider changing it to useLayoutEffect instead of useEffect