Alex Merced

Posted on Apr 21, 2021 • Edited on Nov 5, 2021

Ultimate 2021 Reference for React Functional Components

#react #vite #webpack #rollup

I will Continue to Expand on Guide in this Gist

React Project Generators
Writing Functional Components
The Rules of JSX
Props
Using Arrays in React
Iterating Over Objects in React
The useState Hook
The useEffect Hook
The useRef Hook
API Calls in React
Form Handling
- Controlled Forms
- Uncontrolled Forms
State Management (Context, useReducer)
React Router
Styled Components
Conditional Rendering
Quick Tips
useMemo and useCallback
Learning More about React

React Project Generators

There is a huge world of generators for a React Project. First off, there is always the generator that comes straight from Facebook/React, create-react-app.

npx create-react-app appName

Easy enough! Here are many of the templates I maintain through my merced-spinup generator tool.

Basic React Template npx merced-spinup react appName
Bare Bones React with Webpack npx merced-spinup react basicreact
React w/ Webpack npx merced-spinup reactwebp appName
React w/ Router npx merced-spinup reactrouter appName
React with Redux npx merced-spinup reactredux appName
React with useReducer npx merced-spinup reactreducer appName
React w/ Typescript npx merced-spinup reactts appName
React with No Bundler (Script Tags) npx merced-spinup reacthtml appName
React with Rollup npx merced-spinup reactrollup appName
React with Sass/Bootstrap npx merced-spinup reactsassbootstrap appName
React with Sass/MaterialUI reactsassmaterialui
React with Sass/Context npx merced-spinup reactsasscontext appName
React with Styled Components reactstyled
React with JSS npx merced-spinup reactjss appName
React with everything npx merced-spinup reactloaded appName
React with Parcel npx merced-spinup rreactparcel appName
React Loaded using Snowpack npx merced-spinup snowreactloaded appName
React Loaded using Snowpack and my custom TaskRunner state management pattern npx merced-spinup snowreacttask appName

The only bundler I didn't cover in the above is Vite which can be generated like so...
npm init @vitejs/app appName --template react

Other Official Generators from the Bundler makers...

Feel free to post more in the comments!

Always make sure to read the package.json to know what scripts turn on the dev server and trigger the build process!

Writing React Functional Components

You can write a react component using any method of writing functions. Check out the the below snippet.

Basically any function that returns JSX (HTML Like Syntax) React will treat as a component.

// Function Declaration
function Component1(props) {
  return <h1> Hello World </h1>
}

// Function Expression
const Component2 = function (props) {
  return <h1>Hello World</h1>
}

// Arrow Function
const Component3 = props => {
  return <h1> Hello World </h1>
}

// Showing them in use
function App(props) {
  return (
    <div>
      <Component1 />
      <Component2 />
      <Component3 />
    </div>
  )
}

Rules of JSX

JSX is the HTML like syntax we can use in React Components. There are several rules to keep in mind.

1. ONLY ONE TOP-LEVEL ELEMENT

GOOD

The div is the only top-level element

<div>
  <h1>Hello World</h1>
  <p>lorem ipsum</p>
</div>

BAD

The h1 and p are both at the top-level, this will cause an error.

<h1>Hello World</h1>
<p>lorem ipsum</p>

Also Good

If you really don't want to wrap the content in a div you can use empty tags which is called a "Fragment"

<>
<h1>Hello World</h1>
<p>lorem ipsum</p>
</>

2. Attributes are camelCase

All HTML attributes you are use too become camel case when writing them in JSX.

onclick becomes onClick
onchange becomes onChange
onSubmit becomes onSubmit
class becomes className (why? because the class keyword is already used in javascript)

You get the idea.

3. Inline styles in JSX

In normal html a inline style would be written like this.

<div style="display: flex; background-color: blue;">dfsfsfsdfsdf</div>

But JSX is NOT HTML it is just an HTML like abstraction over Javascripts DOM API. So when writing inline styles your dealing with the style object of the DOM node, so instead of a string you pass an object that will be merged into that nodes style object. Since it's javascript, all the CSS style attributes are now camel case instead of hyphenated.

<div style={{display: "flex", backgroundColor: "blue"}}>dfsfsfsdfsdf</div>

4. ARRAYS WORK

You can pass arrays of JSX if you want.

return [<h1>Hello World</h1>, <h1>Hello World</h1>, <h1>Hello World</h1>]

Is the same as me writing

return (
  <>
    <h1>Hello World</h1>
    <h1>Hello World</h1>
    <h1>Hello World</h1>
  </>
)

5. INJECTING JAVASCRIPT EXPRESSIONS

Your JSX is treated as html, and anything in curly brackets are treated as Javascript expressions in the functions scope. Any valid javascript expression can be used this way.

return <h1> I am {30 + 5} years old </h1>

Props

Props allows a component to receive data from its parent component.

Some rules

Props can only be sent from a parent to a child
If the parent needs data from the child it should send a function as a prop then the child can pass its data to the function as an argument.
Anything can be sent as a prop, including JSX

//The Child Component
const Child = props => {
  //change the value of someVariable using function sent via props
  props.setter(8)

  return <h1>{props.stuff}</h1>
}

// THe Parent Component
const Parent = props => {
  let someVariable

  //function to set someVariable
  const setSV = data => {
    someVariable = data
  }

  // send down two props, stuff and setter
  return <Child stuff="hello world" setter={setSV} />
}

Using Arrays in React

Often times we may want generate JSX for many elements of an array, the standard way of doing so is using the array.map method. Use the example below to see how.

const Component = () => {
  // an array of dogs
  const dogs = [
    { name: "Sparky", age: 5 },
    { name: "Spot", age: 5 },
    { name: "Ralph", age: 5 },
    { name: "Fido", age: 5 },
  ]
  // map over the dogs array and create an array of JSX for each dog
  const dogJSX = dogs.map(dog => {
    // we return JSX for each dog in the array which we store in the dog variable, essentially we are looping over dog of dogs
    return (
      <div>
        <h1>{dog.name}</h1>
        <h2>{dog.age}</h2>
      </div>
    )
  })

  // the component returns JSX that uses the dogJSX array
  return <div>{dogJSX}</div>
}

Iterating Over an Object in React

Using Objects.keys to generate an array of strings that are the keys of the objects properties. You can then map over the array to generate JSX for each property.

const Component = props => {
  const Alex = {
    name: "Alex Merced",
    age: "35",
    email: "alex@alexmerced.dev",
  }

  return Object.keys(Alex).map((key, index) => {
    return (
      <h2>
        {key}: {Alex[key]}
      </h2>
    )
  })
}

The useState Hook

The useState hook allows us to generate variables that are special, as updating them would trigger your component and its children and cause them to update.

First step is always importing the useState hook.

import { useState } from "react"

Inside the body of your component function you can then initiate a state variable. The naming convention is "state" for the variable and "setState" for the function that updates the states value.

If I wanted to create state for a counter it would look like this.

// initiate counter at 0, setCounter let's me update counter
const [counter, setCounter] = useState(0)

So a simple counter component would look like this...

import { useState } from "react"

const Counter = props => {
  // Declare the state
  const [counter, setCounter] = useState(0)

  // Function to add one to the state
  const addOne = () => {
    // sets counter to its current value + 1
    setCounter(counter + 1)
  }

  // The h1 display the counter and button runs addOne function
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={addOne}>Click Me to Add One</button>
    </div>
  )
}

That's as simple as it gets. What happens when the button is clicked.

setCounter is passed the current value + 1
React then compares this new value to the old value of counter
If they are the same, React does nothing (beware of references as values when it comes to objects and arrays)
If they are different then React does update its VirtualDOM based on a re-render of the component and its children
It then compares the virtualDOM to the real browser DOM and only updates the places in which they differ.

The above process is why variables that are "State" are reactive, meaning the DOM will update when the value updates. All other variables are not reactive and will not trigger updates when changed.

NOTE: If the state is an object or array, make sure you pass a new array or object and not just modify the old one. Objects and Arrays are references, so if you pass the old array with modified values the references will still be equal so there will be no update to the DOM. (Like replacing a couch in a house, but the house is still at the same address)

Example...

Don't do this

// modify the existing state
state[0] = 6
// then setState as the existing state, triggering NO update
setState(state)

Do this

// create a unique copy of the array
const updatedState = [...state]
// modify the new array
updatedState[0] = 6
// set the State to the updatedArray, DOM will update
setState(updatedState)

The useEffect Hook

Here is our counter component from earlier with a console.log and second piece of state.

import { useState } from "react"

const Counter = props => {
  // Declare the state
  const [counter, setCounter] = useState(0)
  // second piece of state
  const [evenCounter, setEvenCounter] = useState(0)

  console.log("I'm just a random log")

  // Function to add one to the state
  const addOne = () => {
    // if counter is even before the update, update evenCounter
    if (counter % 2 === 0) {
      setEvenCounter(evenCounter + 1)
    }
    // sets counter to its current value + 1
    setCounter(counter + 1)
  }

  // The h1 display the counter and button runs addOne function
  return (
    <div>
      <h1>{counter}</h1>
      <h1>{evenCounter}</h1>
      <button onClick={addOne}>Click Me to Add One</button>
    </div>
  )
}

So right now this component displays both counters in its JSX

when we click the button counter will always go up by 1
if counter is even before it is increased, evenCounter will go up

Any code in the function body will run again on every render of the component. The component will render with every change of state. So in this case if we keep clicking the button that console.log will run again and again.

What if we only want it to run when evenCounter changes.

This is where the useEffect hook comes into play. This hook is a function that takes two arguments:

A function that will be run immediately when the component loads and anytime any value in the second argument changes
An array of values, when they change the function will run again. Usually an empty array if you never want the function to run again.

import { useState, useEffect } from "react"

const Counter = props => {
  // Declare the state
  const [counter, setCounter] = useState(0)
  // second piece of state
  const [evenCounter, setEvenCounter] = useState(0)

  //making sure console.log only runs on certain renders
  useEffect(() => {
    console.log("I'm just a random log")
  }, [evenCounter])

  // Function to add one to the state
  const addOne = () => {
    // if counter is even before the update, update evenCounter
    if (counter % 2 === 0) {
      setEvenCounter(evenCounter + 1)
    }
    // sets counter to its current value + 1
    setCounter(counter + 1)
  }

  // The h1 display the counter and button runs addOne function
  return (
    <div>
      <h1>{counter}</h1>
      <h1>{evenCounter}</h1>
      <button onClick={addOne}>Click Me to Add One</button>
    </div>
  )
}

So notice the useEffect receives a function that executes our log, and we also gave it an array with evenCounter in it. This means...

The function will run once when the component is first loaded
The function will run again only when evenCounter changes

useEffect is more regularly used for API calls. Usually you'll call the API, get the data then update state inside a useEffect to prevent an infinite loop from occurring.

useEffect(() => {
  axios(URL).then(data => setState(data))
}, [])

Also if the function given to useEffect returns a function, the returned function will be run when the component is removed from the DOM useful for remove event listeners that may be left behind (not something that should come up often)

The useRef hook

Think of the useRef hook kind of like document.querySelector, it let's you assign a DOM node to a variable so you can access its properties. React declarative (express what you want, not how to make it) nature makes it hard to write normal imperative (how to make the thing step by step) DOM code. So if you need to get access to a DOM node like an input you can do the following:

import { useRef } from "react"

const Component = props => {
  // create a new ref, we'll assign it in our JSX
  const inputRef = useRef(null)

  const handleClick = () => {
    //log the inputs elements value
    console.log(inputRef.current.value)
  }

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Click Me</button>
    </div>
  )
}

API Calls in React

There is no special React Way to call an API, you can use Fetch which comes native to the browser or use third party libraries like jQuery or Axios to make the request.

Example

The only twist in React is you usually don't use the data directly from the response, instead you store it in state and just use the data from the state.

import {useState} from 'react'

function Component(props){

  // Declare state to hold the data from the api
  cosnt [apiData, setApiData] = useEffect({}) // should be whatever the api data returns, object or array

  // make a function to do the api call and update the state
  const getData = async () => {
    const response = await fetch("URL TO YOUR API GOES HERE")
    const data = await response.json()
    setApiData(data)
  }

  // use useEffect to run this function on component load, don't forget the empty array as second argument or you will create an infinite loop
  useEffect(() => {
    getData()
  }, [])

  // Then you can just use the state in your JSX, use the new Optional Chaining Feature (?.) to avoid errors
  // It will avoid throwing an error for non-existant properties
  return <h1> {apiData?.results[0]?.name} </h1>

}

Form Handling

There are two ways to handle forms in React.

Controlled Forms: The value of the inputs are bound to state, so value of state and the value of the inputs are always in sync.
Uncontrolled Forms: The forms are not bound by state, instead their values are pulled using a ref when needed.

Example of a Controlled Form

Parts:

object holding form values as state
handleChange function that updates the state when we type into the form
handleSubmit function to handle form submission and do what you want with the data

import { useState } from "react"

const Form = props => {
  //State to hold the form data
  const [form, setForm] = useState({
    name: "",
    age: 0,
  })

  // handleChange function
  const handleChange = event => {
    // dynamically update the state using the event object
    // this function always looks the same
    setForm({ ...form, [event.target.name]: event.target.value })
  }

  const handleSubmit = event => {
    // prevent page refresh
    event.preventDefault()
    // do what you want with the form data
    console.log(form)
  }

  // The JSX for the form binding the functions and state to our inputs
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={form.name}
        onChange={handleChange}
        name="name"
        placeholder="write name here"
      />
      <input
        type="number"
        value={form.age}
        onChange={handleChange}
        name="age"
        placeholder="write age here"
      />
      <input type="submit" value="Submit Form" />
    </form>
  )
}

Example of an Uncontrolled Form

a ref created for each input
handleSubmit for when form is submitted

import { useRef } from "react"

const Form = props => {
  // ref to get input values
  const nameInput = useRef(null)
  const ageInput = useRef(null)

  const handleSubmit = event => {
    // prevent page refresh
    event.preventDefault()
    // do what you want with the form data
    console.log({
      name: nameInput.current.value,
      age: ageInput.current.value,
    })
  }

  // The JSX for the form binding the functions and state to our inputs
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={nameInput} placeholder="write name here" />
      <input type="number" ref={ageInput} placeholder="write age here" />
      <input type="submit" value="Submit Form" />
    </form>
  )
}

State Management

State is the most important concept in React, your app is "reactive" because you have state for data your UI depends on. As Apps get more complex, deciding how to handle state and where it should be housed can get quite daunting.

Here are some questions to use as a guide.

This Piece of State is Used in how many components?

0-1: It should be in the one component using it and nowhere else
2-5: It should be located in a parent all the components share but as low in the component tree as possible
5+: Time to consider Context

Lifting State

The concept of Lifting state occurs when siblings need to share state with each other. The lifting state pattern occurs of the following pattern.

The state is housed in the parent of the two siblings
The parent passes a function as props to the sender to alter the parents state
The parent passes the state itself as a prop to the receiver to receive the updated state

// Component receive function as prop to update parents state
const SenderChild = props => {
  return <button onClick={() => props.update("Goodbye")}>Click Me</button>
}

// Component receives parents state
const SeceiverChild = props => {
  return <h1>{props.value}</h1>
}

// The parent who passes props to both children
const Parent = props => {
  // The State
  const [state, setState] = useState("Hello")

  // Function to update state to send to child
  const updateState = data => setState(data)

  // we pass the function and the state as props to the children
  return (
    <div>
      <ReceiverChild value={state} />
      <SenderChild update={updateState} />
    </div>
  )
}

Prop Drilling

This is the inevitable tragedy that occurs when your components trees grow to several layers. Imagine a piece of state is in a component that is needed in a grandchild component... you'd have to do the following.

const GrandChild = props => <h1>{props.data}</h1>

const Child = props => <GrandChild data={cheese} />

const Parent = props => <Child cheese="gouda" />

This is prop drilling, the Parent passes cheese to child, who passes the same data as data to GrandChild. Imagine if it was a Great-Great-Grandchild... that's a lot of typing just so one component can receive a single piece of data.

There are several solutions to this.

React Context
React useReducer Hook
The TaskRunner Pattern
Redux
And many more... (MobX, State Machines, ...)

Let's cover a few!

Context

What context allows us to do is to create an object that be passed directly to children of any level without having to pass them around as props. If props were like walking down several flights of stairs, Context is liking taking an elevator to where you need to go, faster and easier.

import { createContext, useContext } from "react"

//create the context object
const context = createContext(null)

const GrandChild = props => {
  // consume the data from the provider in parent
  const ctx = useContext(context)
  return <h1>{ctx}</h1>
}

// notice... no props pass through child in this scenario
const Child = props => <GrandChild />

// the context provider determines what data the parent provides its children
const Parent = props => (
  <context.Provider value={"cheese"}>
    <Child />
  </context.Provider>
)

So notice, because we used Context, the parent component was able to pass data directly to it's grandchild without having to pass any props. Context makes transporting data across your components much easier. The only downside is the direction of the data and where it is used will be a little less obvious to a random spectator.

The useReducer Hook

Before context many use Redux for state management. Not only did Redux allow you to store all your state in one place (the Redux Store) but also allowed you to house all your stateful logic in one place called the Reducer function.

The reducer function would normally be passed an "action" which is an object with two properties. This action was passed to the reducer calling a "dispatch" function.

type: A string that is passed to a switch to determine how to update the state
payload: Any data needed for the state update.

React eventually took the core Redux functionality and built it in to React as the useReducer hook. Below is a basic example of the useReducer hook.

import { createContext, useContext, useReducer } from "react"

//create the context object
const context = createContext(null)

const GrandChild = props => {
  // consume the data from the provider in parent
  const ctx = useContext(context)
  // the h1 displays the state pulled from context
  // the buttons call dispatch and pass the action to the reducer
  return (
    <>
      <h1>{ctx.state}</h1>
      <button onClick={() => ctx.dispatch({ type: "add", payload: null })}>
        Add
      </button>
      <button onClick={() => ctx.dispatch({ type: "subtact", payload: null })}>
        Subtract
      </button>
    </>
  )
}

// notice... no props pass through child in this scenario
const Child = props => <GrandChild />

// the context provider determines what data the parent provides its children
const Parent = props => {
  // the reducer with our stateful logic
  const reducer = (state, action) => {
    // get the type and payload from the action
    const { type, payload } = action

    switch (type) {
      // determine how to update the state based on action type
      case "add":
        return state + 1
      case "subtract":
        return state - 1
      default:
        // if it doesn't match any type, keep the state as is
        return state
    }
  }

  // the initial value of the state
  const initialState = 0

  // create the state and the dispatch function
  const [state, dispatch] = useReducer(reducer, initialState)

  // pass the state and dispatch via context in an object
  return (
    <context.Provider value={{ state, dispatch }}>
      <Child />
    </context.Provider>
  )
}

React Router (React Router 6 and above)

install npm install react-router-dom

Router Component

The Router component tracks url bar and passes information for all the other React Router components to work. Router is a Provider so anywhere you plan on using Router should be a child of Router. To give the whole app access to Router wrap the App component is Router.

import { BroswerRouter as Router } from "react-router-dom"

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById("root")
)

Route & Routes Component

The Route component defines a route and will render JSX only if the URL matches the path specified while Routes allows you to group several routes.

import { Routes, Route } from "react-router-dom"

function App(props) {
  return (
    <div>
    <Routes>
      <Route path="/home" element={<Home/>}/>
      <Route path="/about" element={<About/>}/>
      <Route path="/projects" element={<projects/>}/>
     </Routes>
    </div>
  )
}

Link Component

The Link component should be used instead Anchor tags when making a link that should trigger a route.

import { Link } from "react-router-dom"

function Navigation(props) {
  return (
    <nav>
      <Link to="/home">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/projects">Projects</Link>
    </nav>
  )
}

React Router Hooks

useLocation: Hook to get router location data
useParams: Hook to get URL Params
useNavigate: to get Navigate function to push people to other pages

Styled Components

Styled Components is a 3rd party library for creating components with built in css.

install npm install styled-components

Use like so...

import styled from "styled-components"

const Container = styled.div`
  width: 80%;
  margin: auto;
  text-align: center;
`

const Title = styled.h1`
  font-size: 3em;
  color: red;
`

const Component = props => (
  <Container>
    <Title>Hello World</Title>
  </Container>
)

Conditional Rendering

There are times when something should render in some situations and not in others. In frameworks like Vue, Angular and Svelte you have things like directives that directly add semantic ways to express this, React leans hard on using pure javascript to control the flow of a component (so strong Javascript skills really pay off in React).

In this article, we will look at an IsEven component that renders one thing if a prop is even and another it isn't. We'll show you different ways of express it.

Return statement within an if block

const IsEven = props => {
  if (props.number % 2 === 0) {
    return <h1> It is even </h1>
  } else {
    return <h1>It is odd</h1>
  }
}

Single Return Statement, If assigns value to a variable

const IsEven = props => {
  let result

  if (props.number % 2 === 0) {
    result = <h1> It is even </h1>
  } else {
    result = <h1>It is odd</h1>
  }

  return result
}

Returning a Ternary Operator

const IsEven = props => {
  return props.number % 2 === 0 ? <h1> it is even </h1> : <h1> it is odd </h1>
}

Returning a Ternary Operator but parts stored in variables

const IsEven = props => {
  const condition = props.number % 2 === 0

  const ifTrue = () => <h1> it is even </h1>

  const ifFalse = () => <h1> it is odd </h1>

  return condition ? ifTrue() : ifFalse()
}

Conditional Classes

const Modal = props => (
  <div className={props.visible ? "active" : ""}>{props.children}</div>
)

const Modal = props => {
  const divClass = props.visible ? "active" : ""

  return <div className={divClass}>{props.children}</div>
}

Conditional Styles

const Modal = props => (
  <div style={{ display: props.visible ? "block" : "none" }}>
    {props.children}
  </div>
)

const Modal = props => {
  const divDisplay = props.visible ? "block" : "none"

  return <div style={{ display: divDisplay }}>{props.children}</div>
}

const Modal = props => {
  const divStyle = {
    display: props.visible ? "block" : "none",
  }

  return <div style={divStyle}>{props.children}</div>
}

Using Object Keys to Determine JSX

const Component = props => {
  const result = {
    good: <h1>Good</h1>,
    bad: <h1>Bad</h1>,
    ugly: <h1>Ugly</h1>,
  }

  return result[props.key]
}

Using a Switch Statement

const Hello = (props) => {
  switch(props.language){
    case "eng":
      return <h1>Hello</h1>
    case "esp":
      return <h1>Hola</h1>
    default:
      return: <h1> No Language Detected </h1>
  }
}

Quick Tips

Destructuring Props

If you know the names of the props your component will receive you can destructure them and save you the hassle of typing props.

const Component = ({ name, age }) => (
  <div>
    <h1>{name}</h1>
    <h2>{age}</h2>
  </div>
)

Spreading Props

If you are giving a component a LOOOOOT of props and it may be a little messy to type them inline, then bundle them in an object and spread them.

So instead of...

<Component name="Alex Merced" age={35} website="devNursery.com" />

Do this...


const props = {
    name: "Alex Merced",
    age: 35,
    website: "devNursery.com"
}

return <Component {...props}>

props.children

All component have a prop by default called "children", the children prop represent any wrapped in the components opening and closing tag. So imagine the below we have a Container Component we use to block of content.

const Container = (props) => {
  const style = {
    width: "90%",
    margin: "auto,
    border: "1px solid green"
  }
  return <div style={style}> {props.children} </div>
}

const App = (props) => {
  return <Container><h1>Hello World</h1></Container>
}

In this case anything between the opening and closing Container tag are stored in props.children will render inside of a div with a green border.

Portals

Portals are a way of injecting something somewhere else in the DOM, not used very often but here is an example.

import { createPortal } from "react"

// This component renders div with the id of target
const Target = props => {
  return <div id="target"></div>
}

// regardless of where this component is used, the h1 will be rendered inside of an element that has the id of "target"
const Payload = props => {
  return createPortal(
    <h1>This is a weird place to be</h1>,
    document.querySelector("#target")
  )
}

const App = () => (
  <>
    <Target />
    <Payload />
  </>
)

So even though the Payload component is below Target, it's output will appear within Target since we are mounting Payload to the div Target renders.

Popular React Libraries

react-router & react-router-dom (client side router)
Formik (forms)
Styled Components (Styling)
Reactstap and React Bootstrap (different bootstrap implementations)
MaterialUI (Material Design Implementation)
merced-react-hooks (Several Custom Hooks for API calls, Forms, State Management, etc.)
Redux (state management)

Other Popular Parts of the React Ecosystem

NextJS (Server-Side Rendering and Static Generation)
Gatasby (Static Site Generator)
ReactNative (Mobile Development)

Other Frontend Frameworks (Competitors)

Angular
Vue
Svelte
SolidJS (Write JSX that compiles like Svelte)
StencilJS (Create Web Components with JSX)
litHTML/litElement (Web Components)
AMPonent (Web Components)
KofuJS (Opinionated Class Based Library with JSX and Observables)
Ember

useMemo and useCallback

The purpose of these hooks are really for after you've completed your application and you want to improve it's performance. You can wrap the calculation of certain variables and functions in these hooks so they only get redefined if certain data changes. These are really advanced and should really wait till your app really needs performance optimization.

Table of Contents