epicweb-dev / react-performance Goto Github PK

Hi Kent. Just opened up a final version for exercise 2 extra credits 2 (or initial exercise 3) in a new tab and got the blank screen with error, something's wrong.

Hi,

at the end of the first exercise, it says:

Notes

Another thing which we won’t cover in this workshop, but you should look into later, is using the webpackChunkName magic comment which will allow webpack to place common modules in the same chunk. This is good for components which you want loaded together in the same chunk (to reduce multiple requests for multiple modules which will likely be needed together).
You can play around with this in the src/examples/code-splitting directory.

the files contains a link:

// http://localhost:3000/isolated/examples/code-splitting/main.js

but visiting this link doesn't work, neither in development nor production build:

Sorry... nothing here. To open one of the exercises, go to /exerciseNumber, for example: /1

I played around a little bit: I can only visit sites that are directly under examples, that's why the other example unnecessary-rerenders.js are accessible.
My solution was to simply move the main.js one folder up and update the module imports, because importing from deeper directories still works.
I didn't create a pull request because I assume there is a problem somewhere else, which prevents accessing the deeper directory directly?

Hello,
using React.memo on CountButton doesn't stop it from rerendering, because it will always receive a new instance of the increment function.

There are a couple of ways to fix this:

• simply don't memoize CountButton, as the focus of the example is on NameInput anyway.
• use React.useCallback on increment before passing it as a property (don't think that's a good solution, though).
• instead of increment, pass setCount as a property to CountButton and define increment inside that component.
• at the end of the example, it says "that people can make the mistake of wrapping
  everything in React.memo which can actually slow down your app in some cases
  and in all cases it makes your code more complex." maybe point them to look at the memoized CountButton in the React DevTools as an example of this? Because that's what I thought it boiled down to.

I hope this isn't too much nitpicking from me! :3

This error appears in the console when ever i make changes to an exercise file. After the changes, when i go back to the exercise I am not able to scroll. Looks like there's an overlay (iframe) blocking the view. I have to refresh to get everything working

src/exercise/07.js:19

      {/*
      🐨 Wrap this div in a React.Profile component
      give it the ID of "counter" and pass reportProfile
      to the onRender prop.
      */}

Hey 👋

I'm following the first lesson right now about code-splitting and I noticed something odd: one of the initial chunk is huge. It's 867KB gzipped and 3.5MB once decompressed 😱 .

I'm using this page: https://react-performance.netlify.app/isolated/final/01.js

As this exercice is about avoiding loading unnecessary JS, this is misleading. In the end, what we save with code-splitting is quite small compared to this chunk.

In the video, I don't see it so it might be a regression.

Basically the subj.

The easiest way to reproduce:
docker-compose up

In fact, any installation method will result in the error.

Fixing the versions in the package.json doesn't help.

In exercise 2, extra credit 2 when adding the web worker I get this error:

Which comes up both when I add the web worker myself and also when I check the final solution for the extra credit.

The error is also present in Exercise 3 and it prevents anything from rendering.

When building the workshop I got the following error which may be related:

webpack compiled with 1 error```

May be related to this issue:
https://github.com/kentcdodds/react-performance/issues/112

In exercise 3 extra credit 1, you mention that you can do the same with selectedItem, I tied that out, and only had problems because I forgot to modify line 68 if (prevProps.selectedItem !== nextProps.selectedItem) return false
We need to change it to:

if (prevProps.selectedItem !== nextProps.selectedItem) {
    const id = prevProps.item.id
    const wasPrevSelected = prevProps.selectedItem?.id === id
    const isNowSelected = nextProps.selectedItem?.id === id
    return wasPrevSelected === isNowSelected
}

You can see it working with the Henderson selected example

On a second note, your CONTRIBUTING.md is outdated, the egghead link is now https://app.egghead.io/playlists/how-to-contribute-to-an-open-source-project-on-github

Hello!

I had a question in the Discord channel on whether the experimental trace API exercise should be removed (exercise 7 extra credit 1). Per this link found in the react docs: https://fb.me/react-interaction-tracing, the tracing API was removed in React 17.

Interestingly though, I see "react": "^17.0.2", in the dependencies and can still see interactions in the exercise:

Maybe it was just removed from the dev tools? Not sure.
Let me know if you need anything else.

Thanks!

I'm seeing NaN in every cell for this extra credit: https://github.com/kentcdodds/react-performance/blob/e92b1a1b61dae6f852524dfe9f8b81511a55113c/src/final/06.extra-3.js

I haven't taken any time to look into it, but should probably not take much work to fix.

I'm also not certain when it broke. I just noticed it the other day.

The comparison is not accurate because one side has cpu throttle and the other doesn't.

This is part of what shows up in #113 and then probably #112, except I'm not getting the (apparently now fixed) undefined error, just the not a function errors related to the workerization.

I still get the rest of the error from #112, and it happens in my exercises for lessons 3 and 4 as well as the final versions. Here is a screenshot from the final for exercise 3, showing nothing rendering, and the console errors.

Videos at https://epicreact.dev/modules/react-performance/react-performance-welcome stuck on loading. There is an error message in the console:

POST https://app.egghead.io/graphql 404

GraphQL Error (Code: 404): {"response":{"error":"","status":404},"request":{"query":"\n  query LessonData($slug: String!) {\n    video_resource(slug: $slug) {\n      slug\n      subtitles_url\n      lesson_view_url\n      dash_url\n      hls_url\n    }\n  }\n","variables":{"slug":"egghead-er-05-00-01-react-performance-welcome"}}}

Even with splitting the contexts, all the cells still render. This is also visible on the production build on Netlify
https://react-performance.netlify.app/isolated/final/05.extra-1.js

And this is logicial because when you click on a cell the state (context) changes for all the cells.

Is there any other solution to avoid rendering all the cells?

Hi guys could you please help me!! I am getting the same issue...I have updated webpack version along with the other dependencies updated versions. Please find the attachments of package.json and webpack.config.js.


8b75-92f3790178a1.png)

Hey @kentcdodds ,

Thanks a lot for this great course.
I have a question about 5th exercise, i have less renders than you without any change :

Do you know why ? Maybe a flamegraph bug ? 🤔
Because i have all cells in ranked.

Thanks a lot, have a nice day :)

RE: https://github.com/kentcdodds/react-performance/issues/115

I'm using the most recent version of the code and am having trouble moving forward with "4. React.memo for Reducing re-renders".

What are your thoughts on adding a note to the course letting people know that this section may not work?

Hey Kent, thanks for the great course over at epic react.

I tried to write a compare function for React.memo's propsAreEqual argument in Exercise 3.1. But I'm not sure if you would like a PR for that.

function listItemPropsAreEqual(
  {
    selectedItem: prevSelectedItem,
    item: prevItem,
    index: prevIndex,
    highlightedIndex: prevHighlightedIndex,
    ...prevProps
  },
  {
    selectedItem: nextSelectedItem,
    item: nextItem,
    index: nextIndex,
    highlightedIndex: nextHighlightedIndex,
    ...nextProps
  },
) {
  const isSelected = nextSelectedItem?.id === nextItem.id
  const wasSelected = prevSelectedItem?.id === prevItem.id

  if (isSelected !== wasSelected) {
    return false
  }

  const isHighlighted = nextHighlightedIndex === nextIndex
  const wasHighlighted = prevHighlightedIndex === prevIndex

  if (isHighlighted !== wasHighlighted) {
    return false
  }

  return shallowEqualProps(prevProps, nextProps)
}

I also had to write a custom shallowEqual function as ListItem passes all extra props to the getItemProps prop getter and therefore would need to update if one of those props changes.

function shallowEqualProps(prevProps, nextProps) {
  if (prevProps === nextProps) {
    return true
  }
  const prevPropsKeys = Object.keys(prevProps)
  const nextPropsKeys = Object.keys(nextProps)

  if (prevPropsKeys.length !== nextPropsKeys.length) {
    return false
  }

  return prevPropsKeys.every(
    propKey =>
      nextProps.hasOwnProperty(propKey) &&
      prevProps[propKey] === nextProps[propKey],
  )
}

Hello, I create PR #35 that fixes a bug that caused the items list to scroll to the top when hovering out of it.
on debugging, I found that onHighlightedIndexChange returns highlightedIndex with value of -1 when the mouse moves out of the list, this makes rowVirtualizer.scrollToIndex methof to scroll to the top

have a good day! 😄 🎈