Git Product home page Git Product logo

Comments (2)

gaearon avatar gaearon commented on May 6, 2024

It's not really about “keep decorators” or “keep components”.
It's about “which does a better job in which case”.

connect()

connect() makes more sense as higher order component because:

  1. You never need to change the selecting function mid-flight. We couldn't do some perf optimizations with <Connector> because it had to correctly handle changing select prop although there was no valid use for this.
  2. Function-as-a-child default case has performance downsides because people often write it as a lambda so they're allocating functions every time render is called.
  3. We have no way to restrict shouldComponentUpdate outside Connector but that would be really useful to make connected components faster.
  4. <Connector> forced you to write “semi-smart” components that knew about Redux but couldn't, for example, handle its state changes in componentWillReceiveProps because they just used <Connector> inside without access to its state.
  5. Even if you didn't want an intermediate component you had to write it anyway. Now you can connect() your dumb component and get the smart component right away, without writing another class in between.

It was a poor choice of abstraction and added unnecessary layers and clumsiness. We got rid of it.

<Provider>

<Provider> makes more sense as a normal component.

  1. Unlike with connect(), it actually does make sense to change the parameters (store in this case) at runtime. For server rendering, we want to pass a new store for every request. Offering it to specify as a singleton at the top makes server rendering non-obvious. Making it a prop points you to the right direction.
  2. It was a shortcut for shortcut's sake, it didn't bring any valuable opportunities.
  3. It didn't work well with React Router.
  4. It didn't work with Redux DevTools.
  5. It made stubbing store for tests more complicated.
  6. In React 0.14, we'll be able to further simplify <Provider>{() => <App />}</Provider> to <Provider><App /></Provider>. At this point it's hard to justify @provider even as a shortcut.

Good riddance.

from react-redux.

damassi avatar damassi commented on May 6, 2024

Spectacular answer. As usual, thanks for being so thorough.

from react-redux.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.