No questions remaining UI #56
Conversation
✅ Deploy Preview for warm-cannoli-79bbb2 ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
| Reset filters | ||
| </Button> | ||
| </Stack> | ||
| <h1>OR</h1> |
There was a problem hiding this comment.
<h1> has a meaning: this is the top title of the page. I assume the top title of this page is not "OR" 😉
Same for h2, h3, ... If you want a big text use CSS, not HTML
On this topic, you can read <Typography/> doc
<Typography variant="h1" component="p">A big text</Typography>This components hase two important props:
variant: defines how the text will look like (here it will look like a top title)componentthe HML compont which will be used (the sementic meaning (here it's a basic text)
There was a problem hiding this comment.
Oh okay, got it. Thank you. I'll make the changes
Co-authored-by: Alexandre Fauquette <[email protected]>
| @@ -18,6 +18,15 @@ export default function Questions() { | |||
| useQuestionBuffer(filterState); | |||
| const question = buffer[0] ?? null; | |||
|
|
|||
| const resetFilters = React.useCallback( | |||
There was a problem hiding this comment.
useCallback (memoization) may not be needed in this case, maybe go with a normal arrow function?
There was a problem hiding this comment.
The setFilterState is not usefull in the array of dependencies, because state setter are guaranteed to stay constant between render
It's not entirely useless, because resetFilters is passed to QuestionDisplay. WIthout that useCallback each render will create a new function, and so <QuestionDisplay/> will rerender too
There was a problem hiding this comment.
Yeah, I guess that the baseline is if the useCallback memoization improves performance. I think that in this case as the QuestionDisplay is a presentational component and doesn't have heavy computations or something really slow, there is not a lot of benefit in memoizing the reset function and makes the code a bit more complex. Also, the memoization is not cost free, it will store in memory and every render needs to compare with dependency array. Besides that, the QuestionDisplay will rerender every time the Questions (index) rerenders, unless QuestionDisplay itself is memoized.
What
Screenshot
Part of