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…

Impress Your Friends With Code Splitting in ReactIn 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…Burke! Why the heck are you doing a keynote? Do keynotes mean nothing anymore?Let me answer that by saying two things…OuchSomeone else was asked to do the keynote. They just asked me to help out.As part of the keynote that I weaseled my way in to, I was looking at how to optimize React builds. Which is a question that we should answer before we start spitting the code splitting.Optimizing React BuildsWhen I say “optimize” a build, I am referring to anything which makes the code smaller and faster. There are a few techniques that are used across the JavaScript landscape to pull this off…BundlingMinificationAoT (Ahead of Time Compilation)Tree Shaking (When your kid gets his drone stuck in a tree AGAIN — er — I mean removing dead code)Code Splitting (loading chunks of code on demand)Three of the above items happen by default with create-react-app: you get bundling, minification and tree shaking for free with create-react-app because of Webpack.React doesn’t do AoT as that is primarily used to compile string templates to executable JavaScript so the browser doesn’t have to do that part. React is already doing that with JSX. This is one of the reasons why React people love to say , “It’s just JavaScript!”. For the record, strings are valid JavaScript too. Just saying. It’s not like Angular…

Impress Your Friends With Code Splitting in React – Hacker Noon