React: Update lesson to remove defaultProps

[headlessNode]

Checks

• This is not a duplicate of an existing issue (please have a look through our open issues list to make sure)
• I have thoroughly read and understand The Odin Project Contributing Guide
• Would you like to work on this issue?

Describe your suggestion

React has announced that support for defaultProps in function components will be deprecated in a future major release. We should update the lesson Passing Data Between Components to reflect the upcoming deprecation of defaultProps.

Path

Node / JS

Lesson Url

https://www.theodinproject.com/lessons/node-path-react-new-passing-data-between-components

(Optional) Discord Name

headlessNode

(Optional) Additional Comments

No response

[wise-king-sullyman]

Thanks for making this issue!

Can you link to where the React team has stated more info about the defaultProps deprecation? I see some chatter about it on GH issues and an RFC but nothing definitively stating the plan.

[headlessNode]

@wise-king-sullyman If you copy-paste the example in the Default Props heading in the react environment you will get an error/warning in the console telling you the defaultProps will be depreciated.

[wise-king-sullyman]

But has there been anything more definitive than that? If not I'd be pretty hesitant to remove defaultProps here at this time.

I wouldn't be opposed to a note or something about the warning being added to our lesson so that learners know not to worry about it.

[gingkapls]

@wise-king-sullyman There has been a mention on the react blog about it
https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-deprecated-react-apis

[wise-king-sullyman]

Thanks @gingkapls!

Since 19 is probably not too far away I'm not opposed to an update here to put us a bit ahead of the curve.

I would definitely still like to see us cover defaultProps at least briefly since it's likely that learners will still be running into it for a long time though.

[headlessNode]

@wise-king-sullyman So to confirm. We want to add a short note on the potential depreciation of the defaultProps?

[wise-king-sullyman]

I would actually refactor the section to lead with the default params example, then after that have a paragraph that just kind of briefly covers what defaultProps is and that learners will likely run into it in existing codebases.

And maybe add a bit to the class components lesson that mentions defaultProps again since they will still be in use there.

[MaoShizhong]

Interesting thing about defaultProps is that they're run before the type checking, so unlike default params, you get type checking on the defaultProps as well.

[gingkapls]

Interesting thing about defaultProps is that they're run before the type checking, so unlike default params, you get type checking on the defaultProps as well.

The blog post also mentions that propType checks will be removed from the react package, and their usage will be silently ignored starting from React 19, and recommends using TS or another type-checking solution. Unless I misunderstood what you were talking about.

I agree with wise-king-sullyman that removing either or both entirely is not the way to go, since maintaining old code-bases could be a significant part of someone's work, and not many places would be switching to React 19 just yet.

Though, I feel that making any modifications to the content related to propType would snowball into a lot of changes for little benefit, since the curriculum aims to teach React, and not React 19+ specifically.

Not sure if sprinkling the section with notes about it being deprecated is the way to go either though.

[MaoShizhong]

My initial reading of that blog was that they're actually removing proptypes from the React object (i.e. they deprecated that in v15.5 after extracting them to a separate package) and only now are they actually removing them from the React object.

But on a second read, it looks like they're straight up removing propTypes from v19 altogether, i.e. using propTypes would do literally nothing.

I think in the grand scheme of things, the team will have to discuss this is more detail, as undoubtedly, the release of v19 and later on when the React compiler gets shipped (and useMemo/useCallback will be deprecated), we may need to do some slightly larger adjustments to the way some lessons are handled/framed.

I think propTypes are still valuable to bring up in the curriculum, just like class components. Even if you won't likely be making new applications using them, professionally, it's more than reasonable to end up working with a codebase that does use them. The difference in our curriculum would be how we frame the propTypes lesson, if v19 silently ignores them, i.e. renders proptypes non-functional.

[headlessNode]

I'm new to the React course, and while practicing defaultProps in this lesson, I encountered the warning/error mentioned earlier. Being a curious guy, I couldn't ignore the error in the console, and after researching a bit I raised this issue.

I'm finding most of the discussions here a bit complex, especially since propTypes and others aren't covered in this lesson. So, Should I move forward with updating the defaultProps section to include a paragraph after the example to explain defaultProps and its possible future deprecation, while acknowledging that people may come across them in some codebases?

[MaoShizhong]

@wise-king-sullyman What do you think about reversing the order of the Default props section in Passing Data Between Components?

Currently it starts by showing Component.defaultProps, then says "you can also combine default props and prop destructuring", showing the default params approach at the end of the section.

Perhaps it may be simpler here to just start by showing the default param approach, then at the end of it say "you may also come across .defaultProps in the wild" with the defaultProps example? Then mentioning that in a future React version (which we can update when our curriculum ends up supporting v19+) it won't be compatible, but is good to be aware of?

@headlessNode sorry if me bringing up propTypes caused some confusion for you 😅 Was mainly just noting an interesting difference between the defaultProps and default params (since propTypes will also be affected in v19, but that's a separate thing to address).