React.js nesting stateless functional component in another stateless component results in: RangeError: Maximum call stack size exceeded

Question

I have one component:

import React from 'react';

import Footer from '../Footer';
import AddTodo from '../../containers/AddTodo';
import VisibleTodoList from '../../containers/VisibilityTodoList';

const App = () => (
  <div>
     <AddTodo />
     <VisibleTodoList />
     <Footer />
  </div>
);

export default App;

and I have another one:

import React from 'react';
import App from './../../App/';
// import Footer from '../../Footer';

const Body = () => (
  <div>
    <App />
  </div>
);
export default Body;

Notice this second one is just a component that wraps another component....

I keep on getting the following error with, RangeError: Maximum call stack size exceeded

const routes = (
  <Route path="/" component={TopNavBar}>
    <IndexRoute component={Body} />
  </Route>
);
export default routes;

However, if I change it to instead:

const routes = (
      <Route path="/" component={TopNavBar}>
        <IndexRoute component={App} />
      </Route>
    );
    export default routes;

It works just fine. Notice the only difference is that the first one, with the index route as "Body", is just a functional component that wraps the functional App component. Why is that causing a maximum call stack size error?

score 0 · Answer 1 · answered Aug 13 '16 at 14:23

I wrote some code based on your codes but could not replicate your error, everything works fine. I also tried with components in separate files but still everything works fine. I think something is missing in question. If you want i can share those 7 files with you so that you can try and compare.

import React, {PropTypes} from 'react';
import {Route, Router, browserHistory, IndexRoute} from 'react-router';


const TopNavBar =   () => (
  <div>
    "TopNavBar"
  </div>
);
const Footer =   () => (
  <div>
    "Footer"
  </div>
);

const AddTodo =   () => (
  <div>
    "AddTodo"
  </div>
);

const VisibleTodoList =   () => (
  <div>
    "VisibleTodoList"
  </div>
);

const App = () => (
  <div>
     <AddTodo />
     <VisibleTodoList />
     <Footer />
  </div>
);

const Body = () => (
  <div>
    <App />
  </div>
);
export default Body;


export default class Q2 extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (<Router history={browserHistory}>
      <Route path="/" component={TopNavBar}>
        <IndexRoute component={Body} />
      </Route>
    </Router>);
  }
}

Q2.propTypes = {
};

score 0 · Answer 2 · answered Aug 13 '16 at 20:32

I actually figured out what was going on.... Apparently, my app.js file was named under App/index.js. I renamed it to be App/app.js and then imported it and it worked perfectly. I have no idea why, but that was the problem and renaming my file to app.js from App/index.js prevented the stackoverflow error. I'm not even sure what really happened there..

React.js nesting stateless functional component in another stateless component results in: RangeError: Maximum call stack size exceeded

2 Answers2