Amir H. Moayeri

Posted on Sep 16

React Mindset: How New React Developers Should Think

#javascript #react #beginners #webdev

React, a popular JavaScript library for building user interfaces, has revolutionized front-end development by enabling developers to create reusable components and manage complex UIs efficiently. However, adopting the right mindset is crucial for new developers to navigate React's unique paradigms. Let’s explore the essential principles and strategies that shape the "React mindset."

1. Think in Components

One of the core concepts in React is component-based architecture. Instead of building entire pages or applications in a single file, React encourages breaking down the UI into smaller, reusable components. This modularity improves maintainability and scalability.

How to think in components:

Identify repetitive patterns in the UI and break them down into reusable pieces.
Each component should ideally handle one specific task (e.g., Button, Header, Card).
Components should be small and focused on one function or responsibility (often called the "single responsibility principle").

When approaching a UI, start by dividing it into a component tree. At the root is your main Appcomponent, which can house other components like Header, Footer, and MainContent.

2. Embrace Declarative Programming

React takes a declarative approach, meaning you define what the UI should look like based on the current application state, rather than imperatively describing how to manipulate the DOM step-by-step.

How to think declaratively:

Think of your components as descriptions of the UI, where the UI will react to changes in state.
Instead of manipulating the DOM directly, React handles updating the DOM based on changes in state or props (properties passed to components).
Focus on the data flow. Your job is to set up the logic that determines what should be rendered based on the state of the application.

Example:

const MyComponent = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      {isLoggedIn ? <h1>Welcome Back!</h1> : <h1>Please Log In</h1>}
    </div>
  );
};

In this example, the component simply declares what the UI should look like based on the isLoggedIn state.

3. Understand the Role of State and Props

React's power comes from its ability to manage dynamic data via state and props.

State is used for data that a component owns and manages internally.
Props are used to pass data from a parent component to a child component.

How to manage state and props:

Identify which data belongs in a component’s local state (use useState or useReducer) and which data should be passed down via props.
Only lift state up to the closest common ancestor when multiple components need to share it. This prevents unnecessary duplication and helps keep your components clean.

Understanding when and where to use state is critical. Overusing state can lead to complexity, while underusing it may limit your app’s interactivity.

4. Composition Over Inheritance

React encourages composition rather than inheritance. Components can be composed together, meaning that smaller components are combined to form larger ones, making the UI modular and easier to maintain.

How to think in terms of composition:

Design components to be flexible and reusable by passing down props, which allow them to render differently depending on the data.
Avoid tightly coupling components; instead, build them to be independent and self-contained.

For instance, rather than building different components for different buttons (e.g., PrimaryButton, SecondaryButton), you can create a single Button component and pass different styles or behaviors via props.

const Button = ({ label, onClick, variant }) => {
  return (
    <button className={`button ${variant}`} onClick={onClick}>
      {label}
    </button>
  );
};

5. Think About Data Flow (Unidirectional)

In React, data flows in one direction: from parent to child components. This is known as unidirectional data flow, and it simplifies how data is managed across the app.

How to manage data flow:

Identify the "source of truth" for each piece of data and ensure it flows down through props.
Avoid trying to sync data between components by force; instead, lift state up to the nearest common ancestor when necessary.

Understanding the flow of data helps keep your app predictable, as you always know where data is coming from and how it changes over time.

6. Get Comfortable with JSX

JSX (JavaScript XML) is a syntax extension that looks like HTML but is used within JavaScript to describe UI. It allows you to write HTML-like code directly within JavaScript, making it easy to create UI elements.

How to think in JSX:

Write HTML-like syntax inside your JavaScript code, while remembering that it's actually JavaScript underneath.
Leverage JavaScript expressions inside JSX by wrapping them in curly braces {}.

const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

JSX makes it intuitive to build dynamic UIs because you can seamlessly integrate logic (like conditionals and loops) inside your markup.

7. Learn Hooks

Hooks, introduced in React 16.8, allow you to use state and other React features in functional components. The most commonly used hooks are useState and useEffect.

How to use hooks effectively:

useState allows you to add state to functional components, making them dynamic.
useEffect lets you manage side effects (e.g., fetching data or updating the DOM) in functional components.

For example, one of useEffect use cases is used to fetch data after the component mounts:

useEffect(() => {
  fetchUserData();
}, []); // Empty dependency array means this runs only once after the initial render.

Hooks enable developers to write cleaner, more maintainable code by replacing complex class component logic with simpler functional patterns.

8. Test and Debug Early

React's component-based structure lends itself to easy testing and debugging, especially when you develop with the mindset of isolating each component. Use tools like Jest and React Testing Library to test individual components in isolation.

How to approach testing:

Write unit tests for individual components.
Test how components behave with different sets of props and state.
Use debugging tools like React DevTools to inspect your component tree and state changes.

Conclusion

Adopting the right mindset when developing in React is essential for success. By thinking in components, embracing declarative programming, understanding state and props, and focusing on composition, you'll be able to build scalable and maintainable applications. Stay curious, and continue to refine your React mindset as the ecosystem evolves!

Top comments (21)

Mark Schlacter • Sep 16

Love how this article breaks down the essential mindset for new React developers. Thinking in components, embracing declarative programming, and understanding state and props are key to mastering React. A great guide for anyone starting out!

Amir H. Moayeri • Sep 16

Welcome to the community and thanks for reading Dear Mark 👍

Bill Hannah • Sep 17

Nice introduction, but puts an emphasis on prop drilling and local state, and doesn't mention context at all. In your example, you have the logged-in status as local state, which it would never be. That would be determined by a context provider in the app component so you don't need to pass this value as a prop to every component in the tree

Aaron Reese • Sep 18

True, but it is an article for beginners. Context or State stores are a more advanced concept and getting your head around useEffect is hard enough for newbies.
Maybe a couple of lines about separating Application state (dark theme, is logged in, side menu open etc) from Data state (list of items, form contents failed validation l, data submission pending) would help.

LAWAL ABDULRAFIU KEHINDE • Sep 18

Without a doubt, the mindset is a major determinant whether you’ll write a good React code or not. Thinking in components leads the pack just as you have mentioned. As much as possible break down repetitive features into independent component and employ props to customize for different scenarios.
This is an amazing article.

Fred Lunjevich • Sep 18

This is a great summation of the mindset needed to be a competent React Dev.

What is becoming more important now, is the ability to know how to think in server and client components and composing UI this way.

This is an added layer of complexity that brings with it the need for careful thought about how state is managed (e.g. using query params instead of local state) and the flow of data. I guess that's an entirely different article!

Godwin 'Kachi • Sep 18

Moments ago, I read from this platform how complex React had made a simple workflow.

And now, I read about approaches to take to get the best out of React.

Isn't Life beautiful 😍?

It's just feel like react is a two edged sword 🗡️ ah

J XVW • Sep 19

I'm tired of using React JS if the application is too big when I run it and the compilation process takes a long time, besides the complexity of the code which makes my head spin, especially if I want to change the code, there are no more dependency problems which are often depreciated, I throw away React JS so I use C# .Net which is easier.

Abraham • Sep 19

Try React with Vite, the compilation is lightning fast

Damian Cyrus • Sep 19 • Edited

8 → 1. 😄
This is also an important mindset, as you already know what the result should be, so write it down and then develop it until the expected result is shown.

huzaifa uddin • Sep 18

Love how this article breaks down the essential mindset for new React developers.I work in a react native app development company in uae and personally Thinking in components, embracing declarative programming, and understanding state and props are key to mastering React.