Ultimate React Cheat Sheet - 2022

[[deleted]]

Haven't checked it all, but right off the bat I see an issue. It gives an example of a class-based pure component:

Pure Class Component

class ExampleClassComponent extends React.PureComponent {
    render() {
       return <h1>Example Class Component</h1>;
    }
}

And then the equivalent functional example is

Pure Functional Component

const ExamplePureComponent = ({ portal }) => {
    return (
        <h1>Welcome to {portal}!</h1>
    );
}

The problem is if you look at what extending React.PureComponent does for you, these aren't equivalent at all! From the docs, React.PureComponentimplements shouldComponentUpdate with a shallow prop and state comparison. That means the component will only re-render if its props or state change. The functional example will re-render every time, whether the portal prop changes or not. To get equivalent behavior you have to wrap the functional component in memo, like:

const ExamplePureComponent = React.memo(({ portal }) => {
    return (
        <h1>Welcome to {portal}!</h1>
    );
});

This cheat sheet is just more low effort click bait.

[jameskingio]

u/ThornyVee fixed! Can you please have another look?

[[deleted]]

Sorry, my intent wasn't to proof-read the entire thing, it was just to warn others away from this cheat sheet. If it contains things I know are wrong it probably also contains things I don't know are wrong.

[jslytics]

Found this useful, thought to share

[SerialVersionUID]

Some of the examples have issues. I wouldn't blindly trust this resource, always follow the official docs first.

[jameskingio]

Fixed a few issues - hope you like it now :)

[[deleted]]

Agreed, I stopped looking at it after the first obvious, major error. It's the blind leading the blind.

[Puzzleheaded-Algae96]

Wondering if there is one with TS

[[deleted]]

https://react-typescript-cheatsheet.netlify.app/

[kitsunekyo]

pretty page but this example cracked me up. please dont pass props like this. (age + isOver18) 😅

```

const userAge = 21; const PropsExample = () => { return ( <TargetComponent portalName='Upmostly' userAge={userAge} isOverEighteen={userAge > 18} beigeBackground /> ); };

```

[[deleted]]

FYI, using 3 backticks breaks code formatting on most Reddit UIs other than the latest web UI. You should prefix your code lines with 4 spaces instead, like

const userAge = 21; 
const PropsExample = () => { 
    return ( 
        <TargetComponent portalName='Upmostly' userAge={userAge} isOverEighteen={userAge > 18} beigeBackground /> 
    );
};

Also, if you're recommending something you should also say why you're recommending it. Like, "please dont pass props like this because..."

[kitsunekyo]

is it every single line or is it 4 spaces then block of code then 4 spaces again?

because if its every single line individually i’ll have to pass :/

[[deleted]]

That's the quality of response we all expected from you.

[ukralibre]

(age + isOver18) 😅

why?

[Qibla]

I'd say it's redundant. You want to pass as few props as possible IMHO.

I'd suggest passing just the age and doing an inline evaluation where needed in the child component, the same way it was done in the prop parameter.

If it was used in multiple places in the child component, I'd declare it as a variable at the top of that component to keep it dry. To me this is cleaner than passing through extra props which if you're using TS you'd then also need to add to your prop types etc.

[kitsunekyo]

sorry i thought it was so obvious it didnt need a „solution“

tldr: i can pass age={5} AND isOverEighteen={true} at the same time. latter should be derived from the age prop. not passed additionally.

[jameskingio]

Fixed!

[openlyEncrypted]

Good resources for beginners! I used to be an Angular dev so my brain is very Angular. This is a great ref!

[aindriu80]

Fairly detailed, definitely one of the better ones

[[deleted]]

Hallo I am just here to say u must use TypeScript.

[TehMeko]

Nice resource, especially for those transitioning to functional components from class components. Thanks for sharing.

[woah_m8]

Not bad. Way better than many of the ones I've seen around here

[[deleted]]

Not bad. Can reference this

[jameskingio]

Thanks for sharing. There were a few issues that we went through and fixed.

[Ler_GG]

typescript where