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

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

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

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

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

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

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

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 ]

In Elm, we don't call it a component. It's just called a reusable view function.

Will T. • Apr 9

That’s cool!

Lê Công Tuấn • Apr 7

Nice one! Keep it up 💪

Will T. • Apr 7

Thanks!

Ellis • Apr 11

Proposed solution: don't use HoC, fRef, memo.

Don't over-organise, don't overthink, don't over-optimise.

Simple is good.
😊

Will T. • Apr 11

Proposed solution: Don’t use React.

Simple is good.
😊

JK. But honestly all these things are only inherent to React.

Ellis • Apr 11 • Edited

Typically, a web app which would be very complex and impossible to manage and maintain, becomes very simple, safe and easy to manage and maintain. And fun and pleasure to develop (DX).

Huge, huge difference. At least relatively speaking.

And secondly, you can implement React in a simplistic way, and you can implement the same app in a convoluted way. The same app. (People who end up with a complex React app don't understand really understand what React, component based programming and the KISS principle, imho.)

That's in my experience and what I know, at least ;o)