DEV Community

⚛️ Organizing Code in a React Component

Will T. on April 07, 2024

Organizing code in a React component is often overlooked sometimes, but things can get complex when dealing with Higher-Order Components (HoCs), fo...

Read full post

William Castro • Apr 8 '24

I’m still learning React but I think I saw something within the docs which stated you no longer need to write forwardRef. Refs are consider to be apart of props. I noticed though if you use Vite for your React project this is the case but if you use create-react-app you still need to use forwardRef. Please correct me if I am wrong on any of these points

Will T. • Apr 8 '24

I haven’t heard of this at all. Would you mind pinpointing the exact website where this is mentioned? Or have a codesandbox demo for it. That’d be much appreciated. Thanks!

William Castro • Apr 8 '24

Hi Will, well it wasn’t an article but it was on YouTube under a YouTuber called Theo, I’m pretty sure you may have heard of him. Basically he created a video on new updates for React 19. On this video he talks about these changes and he even refers to one of the React core devs with a tweet from twitter.
The tweet from twitter read

“useMemo, useCallBack, memo -> React Compiler

forwardRef —> ref is a prop

React.lazy -> RSC, promise-as-child

use context -> use(Context)

throw promise -> use(promise)

-> ”

Posted by Andrew Clark

Maybe I misunderstood? If I misinterpreted the tweet and the video I am open to your point of view.
BUT when I excluded the forwardRef from my Vite project it worked. When I left it on my Vite project, errors appeared every where within my component.

Will T. • Apr 8 '24

Ah yes, I often watch him too. I've heard of it, but it's supposedly a change from React 19. I don't know if it works on React 18 in a Vite project. I'll give it a try and get back here.

Will T. • Apr 10 '24

I've verified this multiple times, and it doesn't seem to be true. I'm also using Vite. Perhaps you've installed some specific plugin for it?

William Castro • Apr 16 '24

I don’t know? The only plug in I added was react-router-dom?
I am still fairly new so it is possible it is just skill issues. But thank you for the reply and I will review again my previous attempts to see if I run into the same issues. Thanks.

Dwayne Crooks • Apr 8 '24

Thankfully in Elm we don't have to worry about any of that.

import Html as H
import Html.Attributes as HA

type alias Props msg =
    { buttonType : ButtonType
    , children : H.Html msg
    }

type ButtonType
    = Submit
     | Button

fancyButton : Props msg -> H.Html msg
fancyButton props =
    H.button
        [ HA.class "MyClassName"
        , HA.type_ <|
            case props.buttonType of
                Submit ->
                    "submit"

                Button ->
                    "button"
        ]
        [ props.children ]