Feature: Allow creating elements using document.createElement before rendering about react

[abhi152003]

In React, you can achieve this by using the useRef hook instead of useMemo. The useRef hook allows you to create a mutable reference that persists across renders and allows you to interact with the DOM directly. Here's how you can do it:

import React, { useRef, useEffect } from 'react';

const MyComponent = () => {
  const elementRef = useRef(null);

  useEffect(() => {
    if (elementRef.current) {
      // Manipulate the DOM element directly here if needed
      // For example, you can add event listeners, set attributes, etc.
      elementRef.current.innerHTML = 'Hello World';
    }

    // If you need to perform any cleanup when the component unmounts,
    // you can return a cleanup function from useEffect.
    return () => {
      // Perform cleanup if needed (e.g., remove event listeners)
    };
  }, []);

  return (
    <React.Fragment>
      <div ref={elementRef} />
    </React.Fragment>
  );
};

export default MyComponent;

With this approach, you can have a reference to the DOM element that persists across renders, and you can update the DOM directly inside the useEffect hook. Keep in mind that directly manipulating the DOM should be used judiciously in React to avoid interfering with React's internal rendering and reconciliation mechanisms.

As for your use case of a Rich Text Editor, you can combine event handling with useRef to maintain state inside the DOM while also listening to events and performing actions based on user interactions. However, be cautious with this approach, as mixing direct DOM manipulation with React's virtual DOM may lead to unexpected issues and bugs. It's crucial to strike the right balance between React's state management and direct DOM manipulation to avoid conflicts and maintain a clean and efficient codebase.

[wakaztahir]

Of course I know about useRef

Drawbacks

1 - Makes the ref nullable

2 - You can only use it inside the use effect, for example I have a sibling component that requires the created div as a prop

you can use useRef to append a child you created before, Which is what I do since I need to send my div as a prop to toolbar

I can set a state too

The solution I propose , opens so many doors to ease of use and everything , just wanna know from some react developer if it's something they'd consider in jsx