React Cheatsheet

Introduction

React Elements

React elements are written just like regular HTML elements. You can write any valid HTML element in React.

<h1>My Header</h1>
<p>My paragraph> <button>My button</button></p>

We write React elements using a feature called JSX.

However, because JSX is really just JavaScript functions (and not HTML), the syntax is a bit different.

Unlike HTML, single-tag elements (like the img element), must be self-closing. They must end in a forward slash /:

<img src="my-image.png" />
<br />
<hr />

React Element Attributes

Additionally, JSX requires a different syntax for its attributes.

Since JSX is really JavaScript and JavaScript uses a camelcase naming convention (that is, “camelCase”), attributes are written differently than HTML.

The most common example is the class attribute, which we write as className.

<div className="container"></div>

React Element Styles

To apply inline styles, instead of using double quotes (“”), we use two sets of curly braces.

Inline styles are not written as plain strings, but as properties on objects:

<h1 style={{ fontSize: 24, margin: '0 auto', textAlign: 'center' }}>My header</h1>

React Fragments

React also gives us an element called a fragment.

React requires that all returned elements be returned within a single “parent” component.

For example, we can’t return two sibling elements, like an h1 and a paragraph from a component:

// this syntax is invalid
function MyComponent() {
  return (
    <h1>My header</h1>
    </p>My paragraph</p>
  );
}

If we don’t want to wrap our elements in a container element like a div, we can use a fragment:

// valid syntax
function MyComponent() {
  return (
    <>
      <h1>My header</h1>
      </p>My paragraph</p>
    </>
  );
}

React Components

We can organized groups of elements into React components.

A basic function component is written similarly to a regular JavaScript function with a couple of differences.

Component names must start with a capital letter (that is, MyComponent, instead of myComponent) Components, unlike JavaScript functions, must return JSX. Here is the basic syntax of a React function component:

function App() {
   return <div>Hello world!</div>;
}

React Props

React components can accept data passed to them called props.

Props are passed from the parent component to a child component.

Here we are passing a prop name from App to the User component.

function App() {
   return <User name='John Doe' />;
}

function User(props) {
   return <h1>Hello, {props.name}</h1>; // Hello, John Doe!
}

Props is an object, so we can select the name prop within User to get its value.

To embed any dynamic value (that is, a variable or expression) within JSX, you must wrap it in curly braces. Since we are only using the name property on the props object, we can make our code simpler with object destructuring:

function App() {
   return <User name='John Doe' />;
}

function User({ name }) {
   return <h1>Hello, {name}!</h1>; // Hello, John Doe!
}

Any JavaScript value can be passed as a prop, including other elements and components.

React Children Props

Props can also be passed by placing data between the opening and closing tags of a component.

Props that are passed this way are placed on the children property.

function App() {
   return (
      <User>
         <h1>Hello, John Doe!</h1>
      </User>
   );
}

function User({ children }) {
   return children; // Hello, John Doe!
}

React Conditionals

React components and elements can be conditionally displayed.

One approach is to create a separate return with an if-statement.

function App() {
   const isAuthUser = useAuth();

   if (isAuthUser) {
      // if our user is authenticated, let them use the app
      return <AuthApp />;
   }

   // if user is not authenticated, show a different screen
   return <UnAuthApp />;
}

If you want to write a conditional within a return statement, however, you must use a conditional that resolves to a value.

To use the ternary operator, wrap the entire conditional in curly braces.

function App() {
   const isAuthUser = useAuth();

   return (
      <>
         <h1>My App</h1>
         {isAuthUser ? <AuthApp /> : <UnAuthApp />}
      </>
   );
}

React Lists

Lists of React components can be output using the .map() function.

.map() allows us to loop over arrays of data and output JSX.

Here we are outputting a list of soccer players using the SoccerPlayer component.

function SoccerPlayers() {
   const players = ["Messi", "Ronaldo", "Laspada"];

   return (
      <div>
         {players.map((playerName) => (
            <SoccerPlayer key={playerName} name={playerName} />
         ))}
      </div>
   );
}

Whenever you are looping over an array of data, you must include the key prop on the element or component over which you are looping.

Additionally, this key prop must be given a unique value, not just an element index.

In the example above, we are using a value which we know to be unique, which is the playerName.

React Context

React context allows us to pass data to our component tree without using props.

The problem with props is that sometimes we pass them through components that don’t need to receive them. This problem is called props drilling.

Here is a oversimplified example of passing props through a Body component that doesn’t need it:

function App() {
   return <Body name='John Doe' />;
}

function Body({ name }) {
   return <Greeting name={name} />;
}

function Greeting({ name }) {
   return <h1>Welcome, {name}</h1>;
}

Before using Context, its best to see if our components can be better organized to avoid passing props through components that don’t need it. To use Context, we use the createContext function from React.

We can call it with an initial value to be put on context.

The created context includes a Provider and a Consumer property, which are each components.

We wrap the Provider around the component tree that we want to pass the given value down. Next, we place the Consumer in the component we want to consume the value.

import { createContext } from "react"

const NameContext = createContext('');

function App() {
return (

<NameContext.Provider value="John Doe">
<Body />
<NameContext.Provider>
);
}

function Body() {
return <Greeting />;
}

function Greeting() {
return (

<NameContext.Consumer>{(name) => <h1>Welcome, {name}</h1>}</NameContext.Consumer>
); }

React Hooks

React hooks were introduced in React version 16.8 as a way to easily add reusable, stateful logic to React function components.

Hooks let us use all the features that were previously only available in class components.

Additionally, we can create our own custom hooks that give our app custom functionality.

Many React hooks were added to the core React library as well. We are going to cover the 6 basic built-in hooks you absolutely need to know and which you will probably use the most:

useState
useEffect
useRef
useContext
useMemo
useCallback

React useState Hook

useState does exactly what it says—it allows us to use stateful values in function components.

useState is used instead of a simple variable because when state is updated, our component re-renders, usually to display that updated value.

Like all hooks, we call useState at the top of our component and can pass it an initial value to put on its state variable.

We use array destructuring on the value returned from useState to access (1) the stored state and (2) a function to update that state.

import { useState } from "react";

function MyComponent() {
   const [stateValue, setStateValue] = useState(initialValue);
}

A basic example of using useState is to increment a counter.

We can see the current count from the count variable and can increment the state by passing count + 1 to the setCount function.

import { useState } from "react";

function Counter() {
   const [count, setCount] = useState(0);

   function updateCount() {
      setCount(count + 1);
   }

   return <button onClick={updateCount}>Count is: {count}</button>;
}

React useEffect Hook

If we want to interact with the “outside world”, such as using an API, we use the useEffect hook.

useEffect is used to perform a side effect, which means to perform an operation that exists outside of our app that doesn’t have a predictable result.

The basic syntax of useEffect requires a function as a first argument and an array as the second argument.

import { useEffect } from "react";

function MyComponent() {
   useEffect(() => {
      // perform side effect here
   }, []);
}

If we want to fetch data, we would use useEffect, such as in fetching and displaying a list of posts:

import { useEffect } from "react"

function PostList() {
const [posts, setPosts] = useState([]);

useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(posts => setPosts(posts));
}, []);

return posts.map(post => <Post key={post.id} post={post} />
}

If we need to use a value that comes from outside the effect function, it must be included in the dependencies array.

If that value changes, the effect function will be re-executed.

For example, here is a bit of code that adds or removes the class “overflow-hidden” to the body element whenever the mobile menu is opened or closed.

function Mobile({ open }) {
   useEffect(() => {
      const body = document.querySelector("#__next");

      if (open) {
         body.classList.add("overflow-hidden");
      } else {
         body.classList.remove("overflow-hidden");
      }
   }, [open]);

   // ...
}

React useRef

useRef allows us to get direct access to a JSX element.

To use useRef, call it, get the returned value, and put it on the ref prop for a given React element.

Refs do not have a built-in prop on components, only React elements. Here is the basic syntax for useRef:

import { useRef } from "react";

function MyComponent() {
   const ref = useRef();

   return <div ref={ref} />;
}

Once a ref is attached to a given element, we can use the value stored on ref.current to access the element itself.

For example, if we wanted to write some code that focuses a search input when the users use the key combination Control + K.

import { useWindowEvent } from "@mantine/hooks";
import { useRef } from "react";

function Header() {
   const inputRef = useRef();

   useWindowEvent("keydown", (event) => {
      if (event.code === "KeyK" && event.ctrlKey) {
         event.preventDefault();
         inputRef.current.focus();
      }
   });

   return <input ref={inputRef} />;
}

React useContext

useContext provides an easier way of consuming context than using the standard Context.Consumer component.

The syntax involves passing the entire Context object that we want to consume into useContext. The returned value is the value passed down to Context.

import { useContext } from "react";

function MyComponent() {
   const value = useContext(Context);

   // ...
}

To rewrite our example from earlier, using the useContext hook:

import { createContext, useContext } from "react"

const NameContext = createContext('');

function App() {
return (

<NameContext.Provider value="John Doe">
<Body />
<NameContext.Provider>
);
}

function Body() {
return <Greeting />;
}

function Greeting() {
const name = useContext(NameContext);

return (

<h1>Welcome, {name}</h1>
); }

How react rendering work

Well, rendering is the React engine process walking through the virtual DOM and collecting the current state, props, structure, desired changes in the UI, etc. React now updates the virtual DOM using some calculations and also compares the new result with the actual DOM on the page. This calculating and comparing is what the React team officially calls “reconciliation”, and if you’re interested in their ideas and relevant algorithms, you can check the official docs.