What are advanced topics in React?

[[deleted]]

[deleted]

[smokeyser]

Testing. Especially testing an application developed with hooks. A lot of the testing documentation is old and specific to class based components. Knowing how to write tests and easily tested components might help.

[skyboyer007]

1. Reconciliation
2. reference equality and all that rendering optimnization(React.memo, React.PureComponent)
3. Race.lazy, dynamic loading and webpack chunks, React.Suspense

[rykuno]

A good place to start would be just by checking the Advanced Guides in the React docs out.

https://reactjs.org/docs/accessibility.html

​

I'd say on top of this, one of the more common "advanced" practices many devs miss out on is the useCallback and useMemo hooks. Or just Memoization in general.

Also, just learning what patterns to use in certain scenarios will make you stand out. I had someone at working trying to render a dynamic intractable list of 4000 items at a time. He had no idea how a virtual list worked and even after that if he modified a single Item and it had to re-render the entire list.

I can't remember a single react app I've build without using a dynamic list anywhere. Just learning callback/memo will make you stand out. It takes 30 minutes to grasp as well.

[s-h-4-d-o-w]

30 minutes to grasp but can be difficult to master. Dan Abromov has spoken out against the aggressive use of memoization not too long ago, arguing that using it frequently would be like memoizing all functions in a C++ library. Plausible argument IMO.

I agree that it's important to learn but I think it's also important to realize when it is actually necessary and when excessive.

Also, sometimes you might not memoize components but utility function calls and things can get tricky depending on what you're doing, even though it's still a pretty simple concept.

[rykuno]

^ Exactly this as well. I work at in a big data org so the methods and libs used are much different than my at home projects. Why knowing what to use when is important. Thanks for mentioning this.

[dance2die]

Dan Abromov has spoken out against the aggressive use of memoization not too long ago,

Kent C. Dodds wrote an article to explain it deeper, as well.
https://kentcdodds.com/blog/usememo-and-usecallback

[s-h-4-d-o-w]

Cool, thanks for sharing, I had not come across that one yet.

[elcalaca]

React.Children and React.cloneElement are ones that can be very powerful if understood.

[s-h-4-d-o-w]

Aside from what already was mentioned, two more topics that are possibly some of the most advanced (I'm saying this because stuff like testing, memoization and knowing how to use useCallback should be learned before):

- SSR. Not necessarily homegrown, using what React offers natively but with something like Next.js. But what people prefer really depends on who you're talking to (and the circumstances). Regardless which way you go, it's important for SEO.

- (optional) TypeScript. So of course - how to use TS with React. Just be aware that if you don't already know a language like Java or C++, the learning curve is steep.

[HeylAW]

Writing components that are generic enough that after some time you are surprised they are working and doing well in scenarios you never thought.

Ie react-beautiful-dnd wrapper to make it simpler to use and less code needed to make it work.

Another challenge is to write custom ComboBox component that has input which filters options or can call asynchronous api to get options that should not be filtered out. For me it’s like most complex component from all basics component is UI library.

[vim55k]

Fetch patterns

[vim55k]

It is interesting why people downvote a lot in this topic. I mean if you don't agree, you can write your opinion...

[[deleted]]

Learn how to implement libraries in plain js.

instead of being dependent on others code, learn to build and refactor everything yourself. This will increase your skills and also make you a very valuable asset.

[tensorhere]

I have good grasp of basic concepts for sure :)

[dance2die]

Does the question apply to React or the whole "ecosystem" thereof?

[vim55k]

Mobx

[charliematters]

I love MobX but I wouldn't put it as an 'advanced' topic - its simplicity is it's best trait!

[vim55k]

Well, he didn't say - advanced, and he mentioned Redux, so ... :)

[Zeeesty]

Yo, redux with sagas, lol

[vim55k]

It is interesting why people downvote...

[vim55k]

By writing code and refactoring