Skip to content

Removing propTypes in production build? #209

Closed
@timche

Description

@timche

What do you think about removing the propTypes in the production build to reduce the bundle size using babel-plugin-transform-react-remove-prop-types?

I've already prepared a fork, so if you think it is a good idea, I can submit a pull request.

Activity

changed the title [-]Removing propTypes in production build[/-] [+]Removing propTypes in production build?[/+] on Jul 26, 2016
gaearon

gaearon commented on Jul 26, 2016

@gaearon
Contributor

@spicyj Do you think this is reasonable for most apps?

ForbesLindesay

ForbesLindesay commented on Jul 26, 2016

@ForbesLindesay
Contributor

Seems like a good idea to me.

insin

insin commented on Jul 26, 2016

@insin
Contributor

Related: it would be cool if wrapping propType declarations in an if (process.env.NODE_ENV !== 'production') block became a common thing to make this automatic for your own code and particularly for your dependencies, for which you're probably using the transpiled ES5 they published to npm - is there a plugin for that?

Edit: Created an issue here: oliviertassinari/babel-plugin-transform-react-remove-prop-types#35 - would be amazing to land this change and promote its use throughout the React ecosystem!

vjeux

vjeux commented on Jul 26, 2016

@vjeux
Contributor

We screwed up and didn't remove propTypes in dev when we started and now people rely on it existing in their app, so doing it now would be a big breaking change.

But for new apps that would be a good default imo. Now, it may be confusing that it is removed in this starter kit and not anywhere else

gaearon

gaearon commented on Jul 26, 2016

@gaearon
Contributor

Now, it may be confusing that it is removed in this starter kit and not anywhere else

I think it’s not a big deal because React will warn very soon when you attempt to call PropTypes validators manually: facebook/react#7132. So people will know they’re not meant to be used in production, whether or not they use this kit.

sophiebits

sophiebits commented on Jul 26, 2016

@sophiebits
Contributor

This would probably be fine. I can imagine some people using it to mask the props object but hopefully not many. Can we add a linter against .propTypes?

gaearon

gaearon commented on Jul 26, 2016

@gaearon
Contributor

A linter against reading it?

gaearon

gaearon commented on Jul 26, 2016

@gaearon
Contributor

I think there are some valid use cases for accessing it, like

DangerButton.propTypes = {
  ...Button.propTypes,
  somethingElse: ...
}
taion

taion commented on Jul 26, 2016

@taion

React-Bootstrap uses propTypes to mask props objects extensively, and a number of the components there would break outright if you stripped out propTypes in node_modules.

It's a fine optimization in most cases but it'd cause difficult-to-diagnose errors if you were to run it against node_modules.

gaearon

gaearon commented on Jul 26, 2016

@gaearon
Contributor

We wouldn’t touch node_modules, just the user code.

On the other hand there’s no reason why somebody shouldn’t be able to copy and paste a component from React Bootstrap and tweak it.

So I guess as long as people rely on this, we can’t do it. (Unless we specifically lint against it.)

taion

taion commented on Jul 26, 2016

@taion

FWIW, this specific use case in React-Bootstrap is something like this: https://github.com/react-bootstrap/react-bootstrap/blob/v0.30.0/src/DropdownButton.js#L26-L27

We have parent components that render two child components, and we use propTypes to split out which prop goes where.

Looks hacky but it's fairly DRY and has worked well in practice.

timche

timche commented on Jul 26, 2016

@timche
Author

Thanks for the info! Looks indeed hacky, but if libraries rely on component propTypes, user code can rely on them as well and removing them can lead to unexpected behaviour in production. Seems like this can be closed then, right?

52 remaining items

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @sophiebits@vjeux@insin@iansu@quantizor

        Issue actions

          Removing propTypes in production build? · Issue #209 · facebook/create-react-app