DEV Community

The React Cheatsheet for 2020 📄 (+ Real-World Examples)

Reed Barger on January 19, 2020

I've put together for you an entire visual cheatsheet of all of the concepts and skills you need to master React in 2020. But don't let the label ...

Read full post

Gizem Ulubayam • Jan 21 '20

Hi, great article. Thank you for your effort. You say list and keys section "use array element index for key" but this is not a good idea. Because when you use an index of an array as a key, React will optimize and not render as expected and also it is an anti-pattern. I just wanted to specify. Have a nice day.

Oleh Ziniak • Jan 24 '20 • Edited

As long as you do not reorder or delete any items, indexes are ok. It's ok even if you add items to the end, or always delete the last one.

Gizem Ulubayam • Jan 24 '20

Yes, you are right. It can only be missed on a large-scale project. So I wanted to specify.

Reed Barger • Jan 21 '20 • Edited

I mention that a unique id is better.

Gizem Ulubayam • Jan 21 '20 • Edited

Ok. I must have missed. Thank you.

Kevin Dalman • Jan 21 '20

You put a lot of work into this. Kudos. However this description misses a key point...

If you have a component that re-renders frequently, useCallback prevents callback functions within the component from being recreated every single time the component re-renders (which mean the function component re-runs)

The main goal of useCallback is so child components won't re-render unnecessarily. If you create a new function on every render, and pass it as a 'callback' to a child component, that child will always re-render because it receives a different prop each time. This is why the hook is named use-callback.

Reed Barger • Jan 21 '20

Child components are not the only time when you will use useCallback. This applies to local functions used within the same component. For example, those used in the useEffect hook.

This is evident if you are using a local function within useEffect and don't include it within the dependencies array. If you're using the eslint plugin for React hooks, you'll get a linting warning which tells you to: 'move the function inside the effect, or wrap it with useCallback.'

I'm highlighting how hooks are used in practice based off of experience, not merely quoting the documentation.

Kevin Dalman • Jan 21 '20

Child components are not the only time when you will use useCallback.

True, but it is a primary use for the hook, which was not mentioned at all, which is why I pointed it out.

This is evident if you are using a local function within useEffect and don't include it within the dependencies array. If you're using the eslint plugin for React hooks, you'll get a linting warning.

The useCallback hook is memoization. Overusing memoization can actually slow code because it's more time-consuming to process than to regenerate simple functions. It often adds complexity with no meaningful benefit.

The scenario you describe should occur only rarely in good code. It is more often a sign of premature optimization when every function is wrapped in useCallback. But how to decide when to or not to? For a good primer I suggest:

kentcdodds.com/blog/usememo-and-us...

I'm highlighting how hooks are used in practice based off of experience, not merely quoting the documentation.

Again, Kudos for taking time to share. However it's good to also grok why documented recommendations are what they are.

I'm a project lead with 30 years experience. I train and mentor devs daily on JavaScript, React, and all things code. I still try to learn something new every day though.

Reed Barger • Jan 21 '20 • Edited

I'm not going to have a discussion about what you think should be emphasized. Everything I mentioned is correct. This is just a quick cheatsheet. They're not supposed to include everything.

Think about others before you comment, please. If you have a suggestion for me, fine. You can send me a message directly and we can talk about it, but there's no need to clutter up what is a cheatsheet for beginners with multiple paragraphs worth of opinions about how the article should be written.

tangobravo • Feb 14 '20

Hi Reed,

Thanks very much for the article (and entire series), it's a great hooks-first treatment for learning React now. I'm just about to embark on my first React project but have pretty extensive experience in other languages and all the way down to the metal in terms of assembly coding. React is quite a different paradigm to what I'm used to but I'm really interested and excited by it.

The useCallback description did have me scratching my head - I really couldn't see how the performance hit of defining (not calling) an inline function would be that bad in your example when that component re-renders - the rest of the code uses arrow functions a lot which is basically short-hand for the same thing after all.

Kevin's comment did really clear things up for me - I can absolutely see a performance issue when wanting to pass on a callback as a prop to a child component, and how useCallback can therefore prevent those children from re-rendering. The name also makes more sense in that context.

I don't want to add to unnecessary clutter but wanted to add my perspective as someone with coding experience but new to React, and thank Kevin for clearing up the one aspect that was confusing me in the post.

Christian Bewernitz • Jan 20 '20

Looks like a very welcoming and nicely done Series to get started! (Just found out about it.)

In case somebody is wondering how some things work with react and typescript:

typescript-cheatsheets / react

Cheatsheets for experienced React developers getting started with TypeScript

React+TypeScript Cheatsheets

Cheatsheets for experienced React developers getting started with TypeScript

Web docs | 中文翻译 | Español | Contribute! | Ask!

👋 This repo is maintained by @swyx, @ferdaber, @eps1lon, @jsjoeio and @arvindcheenu, we're so happy you want to try out TypeScript with React! If you see anything wrong or missing, please file an issue! 👍

| |

All React + TypeScript Cheatsheets

The Basic Cheatsheet (/README.md) is focused on helping React devs just start using TS in React apps
- Focus on opinionated best practices, copy+pastable examples.
- Explains some basic TS types usage and setup along the way.
- Answers the most Frequently Asked Questions.
- Does not cover generic type logic in detail. Instead we prefer to teach simple troubleshooting techniques for newbies.
- The goal is to get effective with TS without learning too much TS.
The Advanced Cheatsheet (/ADVANCED.md) helps show…

View on GitHub

is a well maintained reference point.

Madza • Jan 20 '20 • Edited

Finally a proper contender to take down Simon Holdorf from the Infinity Top's throne ;)

Dmitriy Davydov • Jan 28 '20

Hi Reed, thank you for the cheatsheet. I found an error in Mouse Tracker example.
This code will not remove mousemove handler:

window.removeEventListener("mousemove", event => {
        const { pageX, pageY } = event;
        setMousePosition({ x: pageX, y: pageY });
      });

Here is a life example. After you press 'Toggle mouse tracker' you'll see an error in console. It happens because you should provide a reference to the handler that you want unsubscribe from. So here is the valid example.

Reed Barger • Jan 28 '20

You're right, we need a reference to the same function. That was my original code, but I removed the reference mistakenly because I thought the abstraction of the callback to handleMouseMove was unneeded. It's fixed now. Thanks Dmitriy!

tangobravo • Feb 14 '20 • Edited

There's still a comment at the end of that example that dates from the original version too.

Md Abdul Momin • Aug 17 '20

Both dev.to and your Blogs these line is okay return <div>I am learning {language}</div>; but pdf cheatsheet should update, because of closing tags!

bhupendra • Jan 20 '20

awesome pocket guide - react cheat-sheet. gearing up for react journey :-)

esandez • Jan 20 '20

Nice post! I've shared ot with my colleagures who are still beginners in React.

However, I would like to say that the PDF is missing something really important: Syntax highlighting (as the post itself has). It's kind of exhausting looking at pieces of code of the same color and the less experienced people would thank having it.

Reed Barger • Jan 20 '20

Hi Eric,

Thank you!

I update the cheatsheets I make to include syntax highlighting. I usually have to do that by hand. I like to use plain text to make sure that the code is still copyable. If I used snapshots, you would have syntax highlighting, but would have to rewrite the code yourself.

Thanks for the feedback, just wanted to provide more info in this regard.

Best,
Reed

glinkot • Feb 19 '20

Super useful. Couple of items that would be nice to include:

The fact custom hooks have to start with 'use'. I was scratching my head a couple of days ago wondering how they differed from other functions
Some examples of passing arguments up through events/handlers in subcomponents. How those should be names is something I'm still working out and would be great in a cheatsheet.

Thanks again!

Md Abdul Momin • Aug 15 '20

If I found something subject-oriented with real-life examples and of course in a nutshell, that's will be a react cheatsheet you have been provided, moreover if I did not subscribe to Bob Ziroll Bootcamp at SCRIMBA sure I will signup for your react Bootcamp.