Impress Your Friends With Code Splitting in React – Hacker Noon

Impress Your Friends With #Code Splitting in #ReactJS:  by @burkeholland #JavaScript

  • Both of those actions show the edit form.First I am going to add a spot in my state for this “EditForm” component to live.class Heroes extends Component { constructor(props) { super(props); this.state = { …, lazyEditHero: null } } …, render() { return ( … ) }}I put mine in…
  • I have put this in a function called LoadEditFormclass Heroes extends Component { constructor(props) { super(props); this.state = { … lazyEditHero: null } } async LoadEditForm() { const { default : EditHero } = await import(‘.
  • /EditHero’); this.setState({ lazyEditHero: EditHero }) } render() { return ( … ) }}Now we just need to call this LoadEditForm from the two functions that trigger the editor component to be shown.class Heroes extends Component { constructor(props) { super(props); this.state = { … lazyEditHero: null } } async LoadEditForm() {…
  • /EditHero’); this.setState({ lazyEditHero: EditHero }) } handleSelect = async hero = { await this.LoadEditForm(); this.setState({ selectedHero: hero }); } handleEnableAddMode = async () = { await this.LoadEditForm(); this.setState({ addingHero: true, selectedHero: { id: ”, name: ”, saying: ” } }); } … render() { return ( … ) }}A few…
  • This also allows us to pass any props to our component when it is so lazily loaded.class Heroes extends Component { constructor(props) { super(props); this.state = { … lazyEditHero: null } } async LoadEditForm() { const { default : EditHero } = await import(‘.

In preparation for the DevUp keynote a few weeks ago, I took some time to learn the minimum amount possible to demonstrate code splitting in React. Now your first reaction is probably… As part of the…
Continue reading “Impress Your Friends With Code Splitting in React – Hacker Noon”