react-router render(), jsx-no-bind alternative.

[ghost]

I opened a Stackoverflow question (https://stackoverflow.com/questions/50777747/react-react-router-render-jsx-no-bind-alternative) for this.

---

I'm using react-router and I was using this Switch and these routes:

<Switch>
  <Route
    path="/route1"
    render={() => <ComponentOne data={data} history={history} match={match} />}
  />

  <Route
    path="/route2"
    render={() => <ComponentTwo data={data} history={history} match={match} />}
  />
</Switch>

But after adding https://github.com/yannickcr/eslint-plugin-react is says to me:

[eslint] JSX props should not use arrow functions (react/jsx-no-bind)

So I'm wondering if this way below (with no warnings and error) is good and if it is the same as the way before:

<Switch>
  <Route
    path="/route1"
  >
    {() => <ComponentOne data={data} history={history} match={match} />}
  </Route>

  <Route
    path="/route2"
  >
    {() => <ComponentTwo data={data} history={history} match={match} />}
  </Route>
</Switch>

There is a better way to do this?

[timdorr]

Just disable that linting rule. I don't see any reason to have it, as the code is fine with arrow functions. That's how render props are recommended in the official React docs.

[ghost]

@timdorr I have a kind of veneration for you.
In this case, however, @ljharb may be right, but it may be that I am wrong:

Here (https://github.com/yannickcr/eslint-plugin-react/issues/1820#issuecomment-395998528) he says:

You can configure jsx-no-bind to allow arrow functions.
However, there's no way to use inline render props that doesn't create a new function on every render (the spirit of the rule).

and he suggests to use the constructor's bind way to do this.

My question - let's say I have many routes - is:

How much is the gain in terms of performance by implementing the constructor's way?

[ljharb]

The React docs sometimes contain antipatterns. If the child is a PureComponent, using an inline render prop like this will cause an unnecessary rerender of the child, as well as of the items being rendered by the render prop. In a small site this may not be significant, but in anything sizable it can add up quickly.