Home > frontend > 6 Important JavaScript Concepts to Learn Before React.

6 Important JavaScript Concepts to Learn Before React.

React drives modern web UIs, but JavaScript mastery is key first. These six important concepts are your foundation to skip React frustration. Master these, and you’ll code faster, debug less, and finally grasp the potential of React as a tool.

By :Thomas Inyang🕒 3 Mar 2025

javascript react

Introduction

Let’s be honest: you’re here because you want to build cool stuff with React. But when I first tried React, I ignored some of the core JavaScript basics and it backfired.


I spent days fixing bugs that had nothing to do with React itself. Turns out that React isn’t a magic wand. It’s a tool built on JavaScript, and if your JS foundation is shaky, your React apps will be too.


In this blog post, I will share with you the following JavaScript concepts that helped me navigate learning React, such as variable declaration, conditional rendering, array methods, asynchronous programming, etc.


After you've had a solid understanding of these concepts, React frameworks and concepts won't be difficult for you to learn and there won't be a need to visit stackOverflow for solutions to minor errors.

See Also: Is Web Development Difficult?

Let’s start with the basis.

1.JavaScript Variable Declaration.

JavaScript Variables


Declaring JavaScript Variable with keywords such as var, let, and const comes with their distinct features:

var:

The following features occur when you declare a variable with the var keyword.

  1. Scope: The var function-scoped can be accessible anywhere within a function.
  2. Reassignable: a variable can be reassigned.
  3. Use of var in React: You should avoid the use of the var keyword in React components. Its function-scoping can lead to bugs in modern React hooks (e.g., stale closures in useEffect).


let:

The following happens when you declare variables with the let keyword.

  1. Scope: Variables declared with the let keyword are only accessible within the nearest block {}.
  2. Reassignable: when you declare a variable with the let keyword, the variable is reassignable.
  3. Use of let in React: This is rarely needed in React components. You should only use the let keyword to hold temporary values inside blocks {}. (e.g., loops (sorting) or local calculations within a component).


const:

The following happens when you declare a variable with the const keyword.

  1. Scope: variables declared with the const keyword are block-scoped.
  2. Reassignable: you can not reassign a variable declared with the const keyword.
  3. Use of const in React: const is the default choice for declaring state variables, props, functions, and components in React. It ensures variables are immutable and aligns with React’s philosophy of predictable state updates.

Why const is React’s Go-To Keyword.

The following reasons are why const is the most preferred keyword for variable declaration.

1. State Management

React’s `useState` hook uses the const keyword to declare state variables and their setters which prevents accidental reassignment:

const [count, setCount] = useState(0); // ✅the count variable is safe and immutable.
//when you try to reassign the count variable, it'll throw an error.
// count = 5; ❌ Error (use setCount(5) instead).

2. Event Handlers and Props:

When it comes to event handling and props. The const ensures that the event handlers function or component logic is declared once and remains the same across re-renders.

const handleClick = () => { /* Submit logic */ }; // ✅ Declared once

This event handler (onclick) is handled once.

See Also: How to Use JavaScript Event Handlers for DOM Manipulation.

3. Objects/Arrays:

Although the const keyword blocks re-assigning of variables, you can still modify object/array properties but it is not a best practice.

const user = { name: "John"}
user.name = "Jane";
// This is allowed, but avoid mutating the React state this way.

Please note, that you should only use the let keyword in your React component to hold temporary calculations.

const CartTotal = ({ items }) => {
let total = 0;
items.forEach(item => { total += item.price }); // ✅ Local calculation
return <p>Total: ${total}</p>;
};

2. JavaScript Conditional Operators.

In this section, I will share with you some conditional operators you will mostly work with while developing a web application with a React Framework. These operators are used to render User Interface (UI) components or data.

Javascript Logical Operators:

These operators–logical AND (&&), logical OR (||) returns the value of one of the specified operands.

AND (&&)

const isAdmin = true;
const hasAccess = isAdmin && "Access Granted"; // "Access Granted"

This means that conditions one and two must be true for the expression to be true, else it's false.

OR (||)

const user = null || "Guest";

This returns the first falsy value or the last truthy value.

React Example:

const [isOpen, setIsOpen] = useState(false)
return (
<>
<button onClick={() => setIsOpen(!isOpen)}>Toggle Modal</button>
{isOpen && <Modal />}
</>
);

In this code, if `isOpen` is `true`, React renders `<Modal />`. If `false`, it returns `false`.

Javascript Optional Chaining

The optional chaining syntax (?.) works by chaining the operation of an object even if it is defined or not. This prevents an object from returning undefined, allowing you to operate on a value that may be null or undefined without causing a TypeError and breaking the web application User Interface (UI).

JavaScript

const user = { profile: { name: "Alex" } };

const userName = user?.profile?.name; // returns "Alex"
This code accesses nested properties without causing errors.

React Use Case.
```jsx
const [data, setData] = useState(null);
useEffect(() => { fetchData().then(setData); }, []);

return (
<div>
{data?.items?.map(item => <p key={item.id}>{item.name}</p>)}
</div>
);

When rendering API Data, the (?.) will prevent `TypeError` if `data` is `null` during the initial render.

Javascript Ternary Operator

This operator chooses between two values:

const isMember = true;
const message = isMember ? "Welcome!" : "Join now!";

In this code, the operator checks if the first condition "isMember" is true, if yes, it returns "welcome", else (:) it returns "Join now!"


React Use Case.

You can use the Ternary operator to toggle between components:

const [isLoggedIn, setIsLoggedIn] = useState(false);
return (
<div>
{isLoggedIn ? (
<Dashboard />
) : (
<Login />
)}
</div>
);

This code toggles between a user dashboard and a login screen for non-user.


You should use the logical AND (&&) for simple and straightforward checks when you want to render components/elements if a condition (truthy) is met.

Use `?.` for deep nested objects and when rendering data from APIs.


When you want to toggle between two components or text values, the ternary operator is the ideal operator.

3. JavaScript Array Methods.

In this section, I'll cover some “most” used array methods that are relevant to React. It is used to store collections of multiple items under a single variable.

Array.map

This method is used to create a new array and populates the results by calling a provided function on every element in the calling array.

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2); // [2, 4, 6]

This code transforms each element in an array into a new value.


React Use Case

const TodoList = ({ todos }) => (
<ul>
{todos.map(todo => (
<li key={todo.id}>{todo.text}</li>
)}
</ul>
);

This code renders the items in an array(list)

Array.length

This method tops the list of array methods for me, it’s used to determine the number of elements in an array and it is also used for pagination of content.

const myArr = [“a”,”b”,”c”,”d”,”e”,”f”]
console.log(myArr.length) //6

React Use Case:

In React you can use length for Pagination by calculating the total pages for paginated data (e.g., a blog post list).

const Posts = ({ posts }) => {

const itemsPerPage = 5;
const totalPages = Math.ceil(posts.length / itemsPerPage);

return (
<div>
{posts.map(post => <Post key={post.id} {...post} />)}
<Pagination totalPages={totalPages} />
</div>
);
};

Array.filter

The filter() method is used to create a new array with elements that pass a test.

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0); // [2, 4]

This test is for numbers without remainder when divided by 2.


React Use Case

In React, you will mostly use the filter method to render a filtered list based on a condition or state (e.g., search or filters).

const TodoList = ({ todos }) => {

const [filter, setFilter] = useState("all");

const filteredTodos = todos.filter(todo => {
if (filter === "completed") return todo.isDone;
return true;
});
return (
<>
{filteredTodos.map(todo => <TodoItem key={todo.id} {...todo} />)}
</>
);
};

Array.find

The find() method returns the first element in the provided array that matches the provided condition in the find() function.

JS

const users = [{ id: 1, name: "John" }, { id: 2, name: "Jane}];
const user = users.find(el => el.id === 2); // { id: 2, name: "Jane" }

Where the user ID = 2.


React Use Case

This method is used to fetch a single item/object from a state.

const UserProfile = ({ userId, users }) => {

const user = users.find(u => u.id === userId);
return (
<div>
{user ? <ProfileForm user={user} /> : <p>User not found</p>}
</div>
);
};

Array.includes

It checks if a certain value is among an array, returning true or false as appropriate.

const colors = ["red", "blue", "green"];
const hasRed = colors.includes("red"); // true

React Use Case**

It can be used to conditionally render a UI component based on state.

const NotificationBanner = ({ statuses }) => {
const showWarning = statuses.includes("error");

return (
{showWarning && <Alert type="warning">Fix errors!</Alert>}
);
};

Array.reduce

It is used to accumulate values into a single result.

const cart = [{ price: 10 }, { price: 20 }];
const total = cart.reduce((sum, item) => sum + item.price, 0); // 30

React Use Case

Mostly used to calculate the total amount of items in an e-commerce cart.

const CartSummary = ({ items }) => {
const total = items.reduce((sum, item) => sum + item.price, 0);
return <h3>Total: ${total}</h3>;
};

When you master these methods, you’ll write cleaner, more efficient React code while utilizing JavaScript’s full power.

4. JavaScript Props and Destructuring.

When you build applications with JavaScript frameworks like React, you need to understand how props and destructuring will transform the way you write your code. Props (short for “properties”) are how you pass data between components, making your code modular, reusable, and clean.

What Are Props?

Props are like arguments you pass to a function but for components (React code base). With props, you can share data from a parent to child component, no need to hardcore values inside components, and the components become reusable (e.g., a Button).


Example of Props:

// Parent Component
function App() {
return <Profile name="Alice" role="Developer" />;
}
// Child Component
function Profile(props) {
return (
<div>
<h1>{props.name}</h1>
<p>{props.role}</p>
</div>
);
}

In this code, `props` is the object holding all values passed to `Profile` Component. You access them via `props.name` or `props.role`. In this example, `props` is not destructured.

It works, but it’s repetitive and less readable.


Props Destructuring.

Props destructuring lets you “unpack values from objects (like `props`) into variables. It makes you not repeat the 'props' keyword, you'll instantly see what data a component needs, and you're safe against missing props.

// Child Component (Improved!)
function Profile({ name, role = "Guest" }) { // Default role if not provided
return (
<div>
<h1>{name}</h1>
<p>{role}</p>
</div>
);
}

When you destructure `props` in the function parameters, you directly use `name` and `role` without the `props.` prefix. The `role="Guest"` which is the default value ensures your component won’t break if a prop is missing.


React Use Case:

In React, props can be used as your primary tool to build dynamic UIs. Here’s how you'll use them like a pro:

You can pass a function as a prop when you need a child component to update a parent’s state.

function Parent() {
const [count, setCount] = useState(0);
return <Child onUpdate={() => setCount(count + 1)} />;
}
function Child({ onUpdate }) {
return <button onClick={onUpdate}>Increment</button>;
}

See More: Type Checking With PropTypes.

In summary, using Props and destructuring props makes your projects' components cleaner, safer, and more maintainable.

5. JavaScript Functions.

JavaScript Function


In this section, you’ll get to understand the different types of Javascript functions, ways to define the functions, and their distinct characteristics that affect how they behave in a React context (functional components).

Regular Javascript Function.

The JavaScript regular function uses the traditional function keyword and has been part of JavaScript since it was created and it has the following features:

  1. It sticks to its binding which behaves differently than the arrow function.
  2. It is hoisted at the top of its scope and can be called before declaration.
  3. Tradition function accepts arguments.
function calculateTotal(price, tax) {
return price + (price * tax);
}

React Use Case.

A scenario where you want to calculate the total price of items in an e-commerce cart and assign a currency unit ($) to it.

const Cart = ({ items }) => {
// Regular function outside the component
function formatCurrency(amount) {
return `$${amount.toFixed(2)}`;
}
const total = items.reduce((sum, item) => sum + item.price, 0);
return <p>Total: {formatCurrency(total)}</p>;
};

You can use the regular JavaScript function to write simple and clean code that is reusable.

JavaScript Arrow Functions

The arrow functions provide a more concise syntax and different scoping behavior. The following are its features.

  1. It inherits its scope from its parent. Making it not have its own "this" context.
  2. It cannot be hoisted which means it must be defined before use.
  3. The arrow function provides multiple with braces {} and implicitly returns a single expression without braces.
//Single expression.
const greet = (name) => `Hello, ${name}!`;

// Multiline expression
const processOrder = (order) => {
const total = calculateTotal(order.items);
const tax = calculateTax(total, order.region);
return { ...order, total, tax };
};

React Use Case

In React, the arrow functions have become the standard for defining hooks and handlers:

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

// Arrow function as a handler
const increment = () => {
setCount(prev => prev + 1);
};
return <button onClick={increment}>Count: {count}</button>;
};

When is the best time to use the arrow function?

  1. To define functional components and event handlers.
  2. As callback functions in hooks (useState, useEffect, etc.)
  3. To implicitly return a single expression.

Inline Functions.

This function (Inline) is used directly in an HTML element and it is peculiar to React because you can directly define it within JSX expressions:

<button onClick={() => console.log("Inline!")}>Click</button>

React Use Case

To pass arguments to handlers

const TodoList = ({ todos, onDelete }) => (
<ul>
{todos.map(todo => (
<li key={todo.id}>
{todo.text}
<button onClick={() => onDelete(todo.id)}>Delete</button>
</li>
))}
</ul>
);

In this code, you'll notice that the inline function (onClick) is returning a single expression–onDelete that accepts an argument (todo.id). But the pitfall of this code is that it re-renders on every render, causing the child component to rerender unnecessarily. This can be fixed with React useCallback hook.

See Also: HTML DOM Manipulation Javascript Function and Event Handler.

In summary, you should use the regular function to create utility functions that are reusable outside the react component, because it has good hoisting features and can accept objects of arguments.


The arrow function is ideal for component and event handler definition and for callbacks in hooks.


With the inline function, you can pass arguments to event handlers in mapped items, and don’t forget to memorize with `useCallback` if performance becomes an issue.

const handleClick = useCallback(() => doSomething(), []);
<ChildComponent onClick={handleClick} />

6. JavaScript Asynchronous Programming (Async/Await) for React.

In web development, asynchronous programming is necessary for handling tasks like data fetching, API calls, and state management without blocking the user interface. Without asynchronous programming, the User Interface (UI) would freeze leading to poor User Experience (UX) when performing tasks.

Why Use Async/Await Over Other Asynchronous Options.

Using options like callback and Promises comes with the following cons.


Callback: Using callback and promises leads to callback hell (nested, unreadable code).

fetchData((err, data) => {
if (err) handleError();
else processData(data, () => { /* More nesting */ });
});

Promises: This option is the callback, it creates code chaining but is still verbose.

fetchData()
.then(data => processData(data))
.then(result => updateState(result))
.catch(err => handleError(err));

But there is a difference when you use async/await.

Async/Await: This option makes you write clean, synchronous-like syntax with error handling via `try/catch`.

try {
const data = await fetchData();
const result = await processData(data);
updateState(result);
} catch (err) {
handleError(err);
}

This code is more linear, clear, and readable. It also handles errors centrally with the `try/catch` keyword.


React Use Case.

For Data Fetching with `useEffect`

const UserProfile = ({ userId }) => {
const [user, setUser] = useState(null);

useEffect(() => {
const fetchUser = async () => {

try {
const response = await fetch(`/api/users/${userId}`);
const data = await response.json();
setUser(data);
} catch (err) {
console.error("Fetch failed:", err);
}
};
fetchUser();
}, [userId]);

return user ? <Profile user={user} /> : <Spinner />;
};

To Handle Form Submission

const LoginForm = () => {
const [email, setEmail] = useState("");
const [isSubmitting, setIsSubmitting] = useState(false);

const handleSubmit = async (e) => {
e.preventDefault();
setIsSubmitting(true);
try {
await axios.post("/api/login", { email });
} catch (err) {
alert("Login failed: " + err.message);
} finally {
setIsSubmitting(false);
}
};

return (
<form onSubmit={handleSubmit}>
<input value={email} onChange={(e) => setEmail(e.target.value)} />
<button disabled={isSubmitting}>
{isSubmitting ? "Logging in..." : "Login"}
</button>
</form>
);
};

This code shows how the submission of a form is done asynchronously.


In summary, Async/Await simplifies asynchronous logic in React, making the code structure clean and readable. You should use the `try/catch` keyword with async/await to handle errors.

See More: JavaScript Async/Await Essential.

By mastering async/await, you’ll handle data fetching, user interactions, and state management in React with confidence.


The above are some JS concepts I have come across and used while developing web applications with React. Also, you can't skip knowing or have a shallow knowledge of JavaScript and start learning React. It's like learning to run before walking.

Conclusion.

JavaScript has powered lots of libraries and frameworks with React topping the list. React becomes a handle tool when you deeply understand JavaScript fundamentals. Without them, you’ll spend more time debugging than developing web applications.


In this post, I’ve shared the concepts that rescued me from countless back and forth understanding state management, array methods for dynamic UIs, and async/await for seamless data fetching. These concepts aren’t just theories; they’re the exact basis I applied to craft this blog’s website's interactive features.


While this list isn’t exhaustive, mastering these fundamentals will give you the confidence to tackle React’s learning curve head-on.


Please Share

You may also like