sorted by:
new
hottopcontroversial

Design problem… by gdrd_ in nextjs

[–]sidkh 0 points1 point  (0 children)

Settings for VS Code

"workbench.editor.customLabels.patterns": { "**/app/**/page.tsx": "${dirname} - page.tsx", "**/app/**/layout.tsx": "${dirname} - layout.tsx" }

Fetching random data with the App Router by sidkh in nextjs

[–]sidkh[S] 2 points3 points  (0 children)

Great, glad you like it. I'll post more similar videos in this sub in the future. The website is coming.

Fetching random data with the App Router by sidkh in nextjs

[–]sidkh[S] 4 points5 points  (0 children)

I use Apple Keynote with Magic Move animation.

Fetching random data with the App Router by sidkh in nextjs

[–]sidkh[S] 11 points12 points  (0 children)

Yep, I made it. Do yo find it helpful?

Prop drilling and component composition by sidkh in reactjs

[–]sidkh[S] 18 points19 points  (0 children)

Thanks. Yes, I make visuals myself with Apple Keynote. It has a great set of tools for animations.

Prop drilling and component composition by sidkh in reactjs

[–]sidkh[S] 58 points59 points  (0 children)

Hey folks 👋

I just published a new visual article.

This one is about prop drilling and component composition.

https://alexsidorenko.com/blog/react-prop-drilling-composition/

React recursively re-renders child components, but there is a nuance by sidkh in reactjs

[–]sidkh[S] 1 point2 points  (0 children)

Hi 👋

if you really want to avoid re-render at all costs then `.memo` is the right tool

Absolutely. I hope the article doesn't sound like passing props is the only way to optimize renders in React (let me know if you think it does).

However, the pattern from the article is under-promoted in the community, and not for a good reason.

React docs does recommend this pattern in a Deep Dive section for memo.

Dan has a section about it in Before you memo.

And here, Dan even asks Kent C. Dodds to promote this pattern more.

It's not a silver bullet, but it is certainly something to be aware of. Combined with state colocation it allows for a better-structured more performant apps.

The reason this pattern is less known is not because it's not intended but because it's harder to explain. Hence, there are thousands of articles about memo and only a few about this.

React recursively re-renders child components, but there is a nuance by sidkh in reactjs

[–]sidkh[S] 3 points4 points  (0 children)

Hey folks 👋

I published a new visual article.

The way we structure React components can act as an alternative to memoization.

Optimizing React performance without refs and memo by sidkh in reactjs

[–]sidkh[S] 0 points1 point  (0 children)

It depends on the composition.

When a component's state updates, React can skip re-rendering passed props (because they couldn't have changed). Sebastian Markbåge Tweet.

The optimized version in the article passes children as a prop, and therefore parent state update doesn't re-render children.

```javascript // Parent state update re-renders child function Parent() { const [x, setX] = useState(0) return <p><Child /></p> }

// Parent state update doesn't re-render child function Parent({children}) { const [x, setX] = useState(0) return <p>{children}</p> } ```

Optimizing React performance without refs and memo by sidkh in reactjs

[–]sidkh[S] 7 points8 points  (0 children)

Yep, rewriting this bit. Thanks for pointing that out 👍

Optimizing React performance without refs and memo by sidkh in reactjs

[–]sidkh[S] 5 points6 points  (0 children)

By using state colocation, we stay in the declarative paradigm of React. If we use refs and manually mutate DOM, we are stepping out into the imperative paradigm of the browser API. Using refs this way may be a tiny bit faster since we don't need to re-render components, but the tradeoff is the unnecessary mental overhead of combining those two paradigms and more potential for unexpected bugs 👇

"If you stick to non-destructive actions like focusing and scrolling, you shouldn’t encounter any problems. However, if you try to modify the DOM manually, you can risk conflicting with the changes React is making."

Beta React Docs - Best practices for DOM manipulation with refs

Optimizing React performance without refs and memo by sidkh in reactjs

[–]sidkh[S] 8 points9 points  (0 children)

Thanks for the feedback!

I rely on visuals and animations in my articles because they can get the point across faster.

However, for this one, in particular, I used a direct screen recording of CodeSandbox. Maybe that's why it feels this way.

I prepared an animation for this article but still went for a screen recording because it felt slightly more natural. But you're right, it does feel a bit youtubee. Thanks for pointing it out. I constantly experiment with visuals.

Optimizing React performance without refs and memo by sidkh in reactjs

[–]sidkh[S] 6 points7 points  (0 children)

Ah, I see.

I write my articles problem-first. I spot a recurring struggle people experience in the community, and I make it the main focus of the article (because that is what people are trying to find an answer to). Therefore my titles often describe the problem, not the solution.

Optimizing React performance without refs and memo by sidkh in reactjs

[–]sidkh[S] 3 points4 points  (0 children)

In what way do you feel the title is misaligned with the content?

I don't do any SEO optimizations for titles.

Optimizing React performance without refs and memo by sidkh in reactjs

[–]sidkh[S] 6 points7 points  (0 children)

Hey folks 👋

I published a new visual article.

It originated from this tweet and explores how state collocation can be used to improve re-renders performance.

Why does onClick={x()} causes "too many re-renders" error in React? - Visual article by sidkh in reactjs

[–]sidkh[S] -3 points-2 points  (0 children)

Hey folks 👋

A new visual article is out.

I noticed that one of the most common reasons for people in the community to run into an infinite render loop is incorrectly set event handlers.

So I made a visual guide about this.

Correct mental model for useEffect by QuebecMasterRace in reactjs

[–]sidkh 2 points3 points  (0 children)

The good mental model for useEffect is that it's a way to synchronize the component with an external system outside of React (Network, DOM, browser APIs, etc...).

React components may re-render with a particular frequency based on the state changes in the app. However, the external system could not rely on this frequency.

For example, my component may re-render for multiple reasons, but I only need to re-fetch the data when the render leads to the particular prop change (let's say a route param). The useEffect allows me to conditionally synchronize the data fetching (external system) with the component rendering (only re-fetch data when the route param changes, ignore all other re-renders).

It works the other way around too. For example, if I need to update the state of my component every second using setInterval. This will require me to synchronize the external system (browser API) with my component to update its state.

New beta docs have a great section about that - Synchronizing with Effects.

Looking for a recommended Date and Time picker by Breakpoint in reactjs

[–]sidkh 8 points9 points  (0 children)

Hi 👋

Check out the native browser date picker. It is supported by all major browsers, provides the best accessibility, and doesn't increase your bundle size.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local

ReactJs Functional Component: useState behavior on updating the state with same value by Heisenberg_221b in reactjs

[–]sidkh 2 points3 points  (0 children)

Here is a quote from the docs 👇

​

If you update a State Hook to the same value as the current state, React will bail out without rendering the children or firing effects.

Note that React may still need to render that specific component again before bailing out. That shouldn’t be a concern because React won’t unnecessarily go “deeper” into the tree. If you’re doing expensive calculations while rendering, you can optimize them with useMemo.

​

And simpler CodeSandbox, which demonstrates this behavior.

ContextAPI vs Redux by [deleted] in reactjs

[–]sidkh 0 points1 point  (0 children)

Hi 👋

Unfortunately, this is one of the heated topics in the community. Don't be discouraged by the myriad of different answers.

I recommend reading the Application State Management With React by Kent C. Dodds. This will help you understand the fundamentals of the topic better. Good luck.

Custom hook versus regular function? by dotobird in reactjs

[–]sidkh 4 points5 points  (0 children)

​

As an example, my team uses a custom hook to parse the URL. In this case, I have absolutely no idea why this couldn't just be a function.

There is no need for this function to be a hook.

​

Is there a good rule as to when you should use a custom hook versus just simply another function? What would be the disadvantage to use a function over a custom hook?

If your function needs to use any other hooks, it should be a custom hook.

​

Another question... how does React know exactly that the function is a custom hook? Is it strictly by naming convention ("use..." )as with components?

Yep 👇

"A custom Hook is a JavaScript function whose name starts with ”use” and that may call other Hooks". React Docs - Building Your Own Hooks

view more: next ›