ReactJS

Designing React Components, Best Practices

Jan 19, 2021

6 min read

Designing React Components, Best Practices

React Components form the core units that we compose together to create web applications. If you know how to build and manipulate an individual React component, you can create anything your imagination comes up with!

If you want to follow along, playing with React is a simple npm tool away with Create-React-App!

Hello, World - The Simplest React Component

The simplest React component can be written with 1 line of code:

const HelloWorldComponent = () => <h1>Hello, World!</h1>

A lot is going on with that 1 line.

What is JSX?

The entire <h1>Hello, World!</h1> block is NOT valid JavaScript. That's JSX. React describes it as a syntax extension of JavaScript. It will allow us to write HTML with the full power of JavaScript. Even more simply, JSX is an example of what would happen if JavaScript and HTML had a baby.

Here's an example of rendering an array of data into the DOM using JSX:

const someRandomNames = [
  'Matthew',
  'John',
  'Jane',
  'Tony Stark',
]

const RenderNames = () => (
  <ul>
    {someRandomNames.map(name => <li>{name}</li>)}
  </ul>
)

By enclosing JavaScript expressions within {} curly brackets, we can call any expression to return JSX or an array of JSX, and it will simply be rendered to the DOM. This is a clean way of using JavaScript to render data to the DOM.

Class Components vs Functional Components

There are two kinds of React Components: Class Components and Functional Components. The example above is an example of a functional component. Here is an example of a class component:

import { Component } from 'react'

class HelloWorldClassComponent extends Component {
  render() {
    return <h1>Hello, World!</h1>
  }
}

This class component does the same thing as the functional component: they both render <h1>Hello, World!</h1> to the DOM. The difference is that the functional component is a lot less code to write than the class-based component.

The React team themselves said that:

React needs a better primitive for sharing stateful logic.

There was a time (before React v16.8) where we were forced to write class components because they gave us access to state and the component lifecycle methods, but React now gives us Hooks to let us 'hook' into class component functionalities with a functional component.

Hooks let you use more of React’s features without classes.

Functional Components

Because of how short and concise functional components are compared to classical components, and since we can still tap into the same powers that a classical component has via Hooks, we will be using functional components going forward.

Functional Components are simply functions that return JSX.

Composing React Components

Let's add a bit of content to our component example:

const PageComponent = () => (
  <>
    <h1>Hello, World!</h1>
    <p>A simple Hello World Component!</p>
    <h2>Things We've Learned</h2>
    <p>Here are a couple of things we've learned so far</p>
    <ul>
      <li>JSX</li>
      <li>Class vs Function Components</li>
    </ul>
    <h2>What's We'll Learn Next</h2>
    <p>Here's what we will be going over next</p>
    <ul>
      <li>Composing Components</li>
      <li>State</li>
      <li>Props</li>
    </ul>
  </>
)

Right off the bat, you'll notice that all of the content is enclosed within a React Fragment <> ... </>. JSX expressions must have ONLY 1 parent element. We could have enclosed it all within a <div> or a <section>, but for conciseness and to not render any extra DOM, we'll use the Fragment.

Everything else within the JSX expression is just extra content written in plain HTML.

Breaking Down a Single Component into Many

We can imagine that after writing any significant amount of content, this 1 component is going to get very crowded. We can and should break this component down into composable pieces. Watch how we can split this large PageComponent into a few parts:

const Intro = () => (
  <>
    <h1>Hello, World!</h1>
    <p>A simple Hello World Component!</p>
  </>
)

const Learned = () => (
  <>
    <h2>Things We've Learned</h2>
    <p>Here are a couple of things we've learned so far</p>
    <ul>
      <li>JSX</li>
      <li>Class vs Function Components</li>
    </ul>
  </>
)

const ToLearn = () => (
  <>
    <h2>What's We'll Learn Next</h2>
    <p>Here's what we will be going over next</p>
    <ul>
      <li>Composing Components</li>
      <li>State</li>
      <li>Props</li>
    </ul>
  </>
)

const PageComponent = () => (
  <>
    <Intro />
    <Learned />
    <ToLearn />
  </>
)

We broke up the Page Component into 3 components: Intro, Learned, and ToLearn. By doing so, we can have these smaller child components focus on their specific task, allowing us to break down our ideas into smaller composable components.

As an app grows and acquires many moving parts, breaking down our concerns into small digestible components allows us to reason about their logic a lot more easily.

To define a child component, create a function that returns some JSX. To use that component, insert it into JSX enclosed in < /> tags.

const ChildComponent = () => <p>Content from child.</p>
const ParentComponent = () => (
  <>
    <p>Content from parent.</p>
    <ChildComponent />
  </>
)

Introducing State with the useState Hook

Up to this point, we've only rendered static information to the screen. We hard-coded our headers, hard-coded our content in the paragraphs, and hard-coded our lists.

React can do much more than handle static content, though. React fulfills the equation:

UI = fn(state) UI is a function of state.

React allows us to bind our data to the component state which will instruct React to re-render our components if their state ever changes.

To implement state in our functional components, we will be taking advantage of the useState Hook. Here is a simple example that uses useState to declare a component state variable. We then bind that state to the value of an input and render that state to the DOM. As the state changes, the component will re-render to keep the DOM in sync with the state.

import { useState } from 'react'

const StatefulComponent = () => {
  const [inputValue, setInputValue] = useState('')
  return (
    <>
      <input value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
      <p>inputValue: {inputValue}</p>
    </>
  )
}

Again, a functional React component is simply a function that returns JSX. That same rule applies above (the function StatefulComponent returns JSX). Included within the function, above the return, is where we use the useState hook to define some state for the component.

The useState Hook is a function that declares state for the component by taking an initial value as an argument and returning a pair of values:

The Current State (inputValue in our example)
A function that updates the State (setInputValue in our example)

One rule when using useState is that we should never update the state by setting the current state variable. This won't instruct the component to re-render. Instead, the only way you should update your state is with the function returned by useState.

Passing Data to Child Components w/ Props

We've learned about defining state in our components and about composing smaller functions together instead of defining really big components. Props are a way of passing data down to child components, allowing them to handle the responsibility of rendering that data.

Here is an example where we define some state and pass down data into a child component. A simple To-Do list:

import { useState } from 'react'

const Todo = () => {
  const [inputValue, setInputValue] = useState('')
  const [todoList, setTodoList] = useState([])

  const handleSubmit = event => {
    event.preventDefault()
    setTodoList([
      ...todoList,
      inputValue,
    ])
    setInputValue('')
  }

  return (
    <>
      <form onSubmit={handleSubmit}>
        <label htmlFor="listItem">List Item: </label>
        <input id="listItem" value={inputValue} onChange={e => setInputValue(e.target.value)} />
      </form>
      <p>Todo List:</p>
      <ul>
        {todoList.map(item => <li>{item}</li>)}
      </ul>
    </>
  )
}

This component, while not that large now, has the potential to grow larger over time. We should break this down into smaller components with specific responsibilities. This example Todo App has 2 main parts:

Receive User Input
Render the Input

Breaking down the Todo App

Let's break these roles down into separate components.

Receive Input:

import { useState } from 'react'

const ReceiveInput = ({ todoList, setTodoList }) => {
  const [inputValue, setInputValue] = useState('')
  const handleSubmit = event => {
    event.preventDefault()
    setTodoList([
      ...todoList,
      inputValue,
    ])
    setInputValue('')
  }
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="listItem">List Item: </label>
      <input id="listItem" value={inputValue} onChange={e => setInputValue(e.target.value)} />
    </form>
  )
}

Render Input:

const RenderInput = ({ todoList }) => (
  <>
    <p>Todo List:</p>
    <ul>
      {todoList.map(item => <li>{item}</li>)}
    </ul>
  </>
)

Composing the Components:

import { useState } from 'react'

const Todo = () => {
  const [todoList, setTodoList] = useState([])
  return (
    <>
      <ReceiveInput {...{ todoList, setTodoList }} />
      <RenderInput todoList={todoList} />
    </>
  )
}

Now we have 3 components, each with specific roles:

ReceiveInput is responsible for handling user input and updating the Todo list state
RenderInput is responsible for rendering the Todo list state
Todo is responsible for declaring the Todo list state and composing together ReceiveInput and RenderInput

Passing Props Down to Child Components

As functions, React Components have a prop argument which can be used to extract data passed down from the parent. The Todo Component in the previous example is where we set JSX attributes which are then passed down as props for the two child components.

This technique helps in breaking down large components into smaller, composable parts.

Conclusion

With all of the tools React Components give a developer, creating a web application has never been easier before. React features such as props, state, and component composability allow a developer to work on small chunks of logic at a time and then compose them together into re-usable parts. This is analogous to how we can connect Lego pieces to create anything our imagination takes us.

For more information on React, check out their documentation for more information!

Happy coding!!! 💻

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

Matthew Pagan

@mastapegs @mastapegs

How to create and use custom GraphQL Scalars

How to create and use custom GraphQL Scalars In the realm of GraphQL, scalars form the bedrock of the type system, representing the most fundamental data types like strings, numbers, and booleans. As explored in our previous post, "Leveraging GraphQL Scalars to Enhance Your Schema," scalars play a pivotal role in defining how data is structured and validated. But what happens when the default scalars aren't quite enough? What happens when your application demands a data type as unique as its requirements? Enter the world of custom GraphQL scalars. These data types go beyond the conventional, offering the power and flexibility to tailor your schema to precisely match your application's unique needs. Whether handling complex data structures, enforcing specific data formats, or simply bringing clarity to your API, custom scalars open up a new realm of possibilities. In this post, we'll explore how to understand, create, and effectively utilize custom scalars in GraphQL. From conceptualization to implementation, we'll cover the essentials of extending your GraphQL toolkit, empowering you to transform abstract ideas into concrete, practical solutions. So, let's embark together on the journey of understanding and utilizing custom GraphQL scalars, enhancing and expanding the capabilities of your GraphQL schema. Understanding Custom Scalars Custom scalars in GraphQL extend beyond basic types like String or Int, allowing data to be defined, validated, and processed more precisely. They're instrumental when default types don't quite capture the complexity or specificity of the data, such as with specialized date formats or unique identifiers. The use of custom scalars brings several benefits: * Enhanced Clarity: They offer a clearer representation of what data looks like and how it behaves. * Built-in Validation: Data integrity is bolstered at the schema level. * Flexibility: They can be tailored to specific data handling needs, making your schema more adaptable and robust. With this understanding, we'll explore creating and integrating custom scalars into a GraphQL schema, turning theory into practice. Creating a Custom Scalar Defining a Custom Scalar in TypeScript: Creating a custom scalar in GraphQL with TypeScript involves defining its behavior through parsing, serialization, and validation functions. * Parsing: Transforms input data from the client into a server-understandable format. * Serializing: Converts server data back to a client-friendly format. * Validation: Ensures data adheres to the defined format or criteria. Example: A 'Color' Scalar in TypeScript The Color scalar will ensure that every color value adheres to a valid hexadecimal format, like #FFFFFF for white or #000000 for black: ` In this TypeScript implementation: * validateColors: a function that checks if the provided string matches the hexadecimal color format. * parseValue: a method function that converts the scalar’s value from the client into the server’s representation format - this method is called when a client provides the scalar as a variable. See parseValue docs for more information * serialize: a method function that converts the scalar’s server representation format to the client format, see serialize docs for more information * parseLiteral: similar to parseValue, this method function converts the scalar’s value from the client to the server’s representation format. Still, this method is called when the scalar is provided as a hard-coded argument (inline). See parseLiteral docs for more information In the upcoming section, we'll explore how to incorporate and validate these custom scalars within your schema, ensuring they function seamlessly in real-world scenarios. Integrating Custom Scalars into a Schema Incorporating the 'Color' Scalar After defining your custom Color scalar, the next crucial step is effectively integrating it into your GraphQL schema. This integration ensures that your GraphQL server recognizes and correctly utilizes the scalar. Step-by-Step Integration 1. Add the scalar to Type Definitions: Include the Color scalar in your GraphQL type definitions. This inclusion informs GraphQL about this new scalar type. 2. Resolver Mapping: Map your custom scalar type to its resolver. This connection is key for GraphQL to understand how to process this type during queries and mutations. ` 1. Use the scalar: Update your type to use the new custom scalar ` Testing the Integration With your custom Color scalar integrated, conducting thorough testing is vital. Ensure that your GraphQL server correctly handles the Color scalar, particularly in terms of accepting valid color formats and rejecting invalid ones. For demonstration purposes, I've adapted a creation mutation to include the primaryColor field. To keep this post focused and concise, I won't detail all the code changes here, but the following screenshots illustrate the successful implementation and error handling. Calling the mutation (createTechnology) successfully: Calling the mutation with forced fail (bad color hex): Conclusion The journey into the realm of custom GraphQL scalars reveals a world where data types are no longer confined to the basics. By creating and integrating scalars like the Color type, we unlock precision and specificity in our GraphQL schemas, which significantly enhance our applications' data handling capabilities. Custom scalars are more than just a technical addition; they testify to GraphQL's flexibility and power. They allow developers to express data meaningfully, ensuring that APIs are functional, intuitive, and robust. As we've seen, defining, integrating, and testing these scalars requires a blend of creativity and technical acumen. It encourages a deeper understanding of how data flows through your application and offers a chance to tailor that experience to your project's unique needs. So, as you embark on your GraphQL journey, consider the potential of custom scalars. Whether you're ensuring data integrity, enhancing API clarity, or simply making your schema a perfect fit for your application, the possibilities are as vast as they are exciting. Embrace the power of customization, and let your GraphQL schemas shine!...

Apr 10, 2024

5 mins

GraphQLJavaScript

Improving INP in React and Next.js

Improving INP in React and Next.js In one of my previous articles, I've explained what INP is, how it works, and how it may affect your website. I also promised you to follow up with more concrete advice on how to improve your INP in your favorite framework. This is the follow-up article, where I'll focus on how to improve your INP score in React and Next.js. How to prepare for INP in React and Next.js? The first thing to do is to ensure you're using the latest version of React. The React team has been working on making React more INP-friendly and has already made some improvements in the latest versions. To enhance your INP score, consider fully taking advantage of new features introduced in React 18, such as Concurrent Rendering, Automatic Batching, and Selective Hydration. However, there are also some general areas to focus on, such as SSR and SSG in Next.js, Web Workers, or optimizing your hooks and state management. Concurrent Rendering The Concurrent Mode in React uses an algorithm that breaks rendering down into so-called "fiber nodes" and schedules the renders based on their expiration and priority. This effectively allows the user to interact with the page while the rendering is still in progress. In previous React versions, all updates, such as setState calls were treated as "urgent" and once the re-render had started, there was no way to interrupt it. Concurrent Mode changes this by being able to prioritize the updates and interrupt a non-blocking state update started with startTransition. For a simple explanation of concurrency in React, you can check out Dan Abramov's explanation. As part of the Concurrent Mode, React introduced several lifecycle methods that allow you to prioritize the rendering of certain parts of your UI, such as: - useTransition hook that allows you to update the state without blocking the UI, - useDeferredValue hook that allows you to defer the rendering of certain parts of your UI, - startTransition API that, similarly to the useTransition hook lets you mark a state update as non-blocking. It lacks, however, an indication of whether it's still pending. Automatic Batching Introduced in React 18, Automatic Batching reduces the number of re-renders that happen on state changes even when they happen outside of event handlers, e.g. in a setTimeout or Promise callback. This feature comes out of the box and you don't have to do anything to enable it, and it makes a great argument for upgrading to React 18. Selective Hydration Selective Hydration allows you to take hydration off the main thread by wrapping your components in a Suspense boundary. This way, components can become interactive faster as the browser can do other work on the main thread while the hydration is happening. To fully take advantage of selective hydration, consider the following: - Prioritizing Above-the-Fold Content: Use Suspense boundaries strategically around any parts of your application that may take the server longer to deliver to ensure they don’t block critical content from becoming interactive as soon as possible. - Hydration on Interaction: Implementing hydration upon user interaction for non-critical components can drastically reduce the main thread's workload, enhancing INP. Vercel even has a small case study showing how using selective hydration improved the performance of a Next.js site. Server-Side Rendering (SSR) and Static Site Generation (SSG) in Next.js Not everything has to run client-side. Next.js excels in SSR and SSG capabilities, which can significantly impact INP by delivering content to users faster. Optimizing SSR with techniques like incremental static regeneration (ISR) or leveraging SSG for static pages ensures that users can interact with content faster, improving the perceived performance. Workers Offloading heavy computations to Web Workers can free up the main thread, enhancing the responsiveness of React and Next.js applications. This strategy is especially useful when dealing with third-party scripts. Offloading such scripts in Next.js can be easily done by specifying the "worker" strategy on your Script component. Be aware that this feature is not yet stable and does not work with the app directory, though. If you want to take things one step further, you could use Partytown, which helps you offload any resource-intensive scripts to Web Workers. It comes with a React component that you can use to wrap your third-party scripts and offload them to a Web Worker, and it's compatible with Next.js as well. Hooks and State Management State management in React applications can easily get out of hand, leading to unnecessary re-renders and effectively an increased INP. Sometimes, using a state management library like Redux or MobX can help you consolidate your state and reduce the number of re-renders. However, they are not silver bullets and can also introduce performance issues if not used properly. If you are dealing with a lot of re-renders due to prop changes, make sure you are leveraging memoization. As of now, you may need to work with useMemo and useCallback hooks to memoize your values and functions, respectively. The upcoming React 19’s Forget Compiler, however, will apparently memoize everything under the hood, making these hooks obsolete. Using memoization properly can help you reduce the number of re-renders and improve your INP. To investigate your hook dependencies and re-renders, you can leverage React Developer Tools or use this handy helper hook I found on the internet to trace your re-renders: ` Conclusion Improving INP in React and Next.js is not easy and can require much investigation and fine-tuning. Still, it's worth doing to avoid being penalized by Google in its search results and provide a better experience for your users. Adopting React 18's new features, leveraging SSR and SSG in Next.js, utilizing Web Workers, and optimizing hooks and state management can significantly boost your INP score and deliver a faster application to your users. Remember, INP is just one among many performance metrics emphasizing the need for a comprehensive approach to performance optimization...

Apr 19, 2024

5 mins

Web PerformanceReactNextJSJavaScript

How to Create a Custom React Renderer

Creating a Custom React Renderer At the very top of the React documentation, the team defines React's main qualities: - Declarative - Component-Based - Learn Once, Write Anywhere The main focus of the React docs is to demonstrate the first 2 qualities of React: its declarative nature, and how it allows the developer to break logic down into components. The main goal of this article will be to expand upon that third quality of React: "Learn Once, Write Anywhere." Requirements To follow along more easily with this post, you should already know a few things: - React: This post doesn't teach you how to declaratively write React, but instead dives into how React communicates with the DOM. Understanding how to write generic React code would be great foundational knowledge before diving into how it works under the hood. - The DOM: A lot of the interactions between React and the DOM are abstracted away under the 'react-dom' package. Having a good understanding of how to render to the DOM with vanilla JavaScript will be incredibly useful since we will be implementing this functionality ourselves. I've also created a repository based on the create react app starter, and added some nice-to-have features to it including: - TypeScript - ESLint - Prettier - Husky w/ pre-commit linting - Tailwind CSS You can test out your code using a vanilla create-react-app installation, but I enjoy these developer tools, so I wanted to offer a configured setup that uses them. Feel free to clone and use the repo! React DOM I'm sure that every single React developer has run create-react-app at least once. When creating a CRA app, 99% of your time is usually spent expanding the functionality of the App component. Very little time is spent on the piece of logic that actually renders the App component. This line is responsible for taking our React App component, and then mounting all of its components along with event handlers, to the DOM. We usually never need to worry about how React does this. Instead, we focus on declaratively adding functionality to the App components. Rendering to the DOM is abstracted away into this one line. This is similar to working with React Native. We develop Native App Components, but we don't think about *how* those components are rendered to different devices. React Native handles that for us, just like how ReactDOM handles rendering to the DOM for us. The Test Application To test out experimenting with our own custom React renderer, I've created a repository forked off of a create-react-app install, with added dev features like linting, git commit hooks, and TailwindCSS. Before diving into replacing ReactDOM, let's look at what our application can look like at the start. Replacing ReactDOM To replace the react-dom renderer with our own, we'll need to import 2 dependencies: - react-reconciler: This exposes a function that takes a host configuration object, allowing us to customize rendering to whatever format we desire. - @types/react-reconciler: Types for react-reconciler After installing these dependencies, we can replace ReactDOM with our new renderer, and then with the help of TypeScript, stub out the remaining portions of our new Renderer. What does a React renderer look like? The React team exposes their react-reconciler as a function to allow third parties to create custom renderers. This reconciler function takes one argument: a Host Configuration object that's methods provide an interface with which React can render to a host environment. The methods of the host configuration object map out to different methods of the configured host environment, allowing the developer to abstract away the process of rendering and updating the state to the environment. ` For example, here is real code from react-dom, which defines how to append a child in the DOM. In our example exploring this, we'll try and minimally recreate react-dom, so we can render our sample app to the DOM. Host Configuration With a stubbed DOM host configuration, and having replaced ReactDOM with our custom renderer, we are now able to run the CRA dev server without errors. However, nothing has been rendered to the DOM yet. Our host configuration method stubs included console.log's, showing when these methods get called though, so the log has a lot of activity. We can see bits and pieces of our App component in these logs, but since our host configuration did not actually mount anything to the DOM, our screen remains blank. Let's fill out a few of our functions to implement this behavior: - createInstance - createTextInstance - appendInitialChild - appendChild - appendChildToContainer TypeScript does a lot of mental heavy lifting by allowing us to define types and enhancing our development with auto-complete for implementing these host config functions. Types and generic host config signature: ` The createInstance function: ` The createTextInstance function: ` The appendChild function: ` In the end, it was just a few familiar DOM calls until we were able to render our application once again, except this time, with our own renderer! Conclusion With just a few method definitions, we are now able to render to the DOM, but we could have also just as easily issued commands to draw on a canvas when trying to render our components, or we could have rendered differently. By learning React once, you can apply it in a number of scenarios. By separating rendering logic from reconciliation logic, React allows third-party developers to create custom renderers. This allows developers to render whereever they want, be it in the canvas, or even to the console....

Sep 24, 2021

6 mins

React

6 Steps to AI Adoption: Building with AI APIs

Tracy Lee, Jerome Hardaway, and Rob Ocel continue their six part series on the six steps for AI adoption. In this episode they discuss AI API integration and better building with AI models. One key takeaway was the importance of choosing the right tools for specific tasks. Jerome emphasized the significance of using content moderation APIs for filtering inappropriate content as an example. These tools help developers improve user experiences by ensuring content accuracy and appropriateness. However, Jerome also warned against blindly relying on AI tools and encouraged programmers to assess their benefits and limitations before implementation. The discussion also touched on how AI impacts coding abilities and problem-solving. AI-powered tools can boost developer productivity by automating repetitive tasks and offering helpful suggestions. Yet, it's important to strike a balance and not become overly dependent on AI, which could hinder critical thinking and problem-solving skills crucial for programmers. One challenge discussed was the difficulty of working with poorly documented APIs, which makes it hard for developers to understand and utilize AI tools effectively. While AI has the potential to enhance productivity and user experiences, it's important for developers to choose the right tools and avoid over-reliance. By carefully evaluating AI tools and investing in clear documentation, developers can leverage AI effectively to improve their coding abilities and problem-solving skills. Download this episode here!...

Apr 15, 2024

2 mins

AIArtificial Intelligence

Designing React Components, Best Practices

Designing React Components, Best Practices

Hello, World - The Simplest React Component

What is JSX?

Class Components vs Functional Components

Functional Components

Composing React Components

Breaking Down a Single Component into Many

Introducing State with the useState Hook

Passing Data to Child Components w/ Props

Breaking down the Todo App

Passing Props Down to Child Components

Conclusion

Matthew Pagan

You might also like

How to create and use custom GraphQL Scalars

Improving INP in React and Next.js

How to Create a Custom React Renderer

6 Steps to AI Adoption: Building with AI APIs

You might also like

How to create and use custom GraphQL Scalars

Improving INP in React and Next.js

How to Create a Custom React Renderer

6 Steps to AI Adoption: Building with AI APIs