DEV Community

Cover image for ⚛️ Organizing Code in a React Component

⚛️ 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...
Collapse
 
sirmay1 profile image
William Castro

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

Collapse
 
itswillt profile image
Will T.

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!

Collapse
 
sirmay1 profile image
William Castro

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.

Thread Thread
 
itswillt profile image
Will T.

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.

Thread Thread
 
itswillt profile image
Will T.

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?

Thread Thread
 
sirmay1 profile image
William Castro

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.

Collapse
 
dwayne profile image
Dwayne Crooks

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 ]
Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
itswillt profile image
Will T.

That’s cool!

Collapse
 
tuanlc profile image
Lê Công Tuấn

Nice one! Keep it up 💪

Collapse
 
itswillt profile image
Will T.

Thanks!

Collapse
 
elsyng profile image
Ellis

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

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

Simple is good.
😊

Collapse
 
itswillt profile image
Will T.

Proposed solution: Don’t use React.

Simple is good.
😊

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

Collapse
 
elsyng profile image
Ellis • 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)