Wemi's Dev Notes

Recently, I spent some time refreshing a few core React and JavaScript concepts that often show up in everyday development. I thought I’d document them here, both for my own learning and in case it helps another developer revisiting these topics.

Here are a few of the concepts I reviewed.

React follows a unidirectional (one-way) data flow, meaning data moves from parent components down to child components through props.

This approach makes applications more predictable and easier to debug because the source of truth for data is clear.

Example:

function Parent() {
  const [name, setName] = React.useState("Wemi");

  return <Child name={name} />;
}

function Child({ name }) {
  return <h1>Hello {name}</h1>;
}

In this example:

• The Parent component holds the state.

• The Child component receives the value via props.

If a child component needs to update the data, it typically does so by calling a callback function passed down from the parent.

This ensures that state updates always happen in a predictable direction.

Two of the most important concepts in React are props and state.

Props

• Passed from parent components to child components

• Read-only

• Used to configure components

State

• Managed within a component

• Can change over time

• Triggers a re-render when updated

Example:

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

Here:

• count represents the current state value

• setCount updates the state

When the state changes, React automatically updates the UI.

The useEffect hook allows functional components to perform side effects.

Common examples include:

• Fetching data from APIs

• Subscribing to services

• Updating the DOM

Example:

useEffect(() => {
  fetchUsers();
}, []);

The dependency array controls when the effect runs.

An empty dependency array ([]) means the effect runs once after the component mounts.

Understanding how and when useEffect runs is important for managing asynchronous behaviour in React applications.

As React applications grow, performance becomes increasingly important.

React provides several tools to help optimize rendering behaviour.

React.memo

Prevents a component from re-rendering if its props have not changed.

export default React.memo(MyComponent);

useMemo

Memoizes expensive calculations.

useCallback

Memoizes functions so they are not recreated on every render.

These techniques can significantly improve performance in applications with large component trees.

Closures are a fundamental concept in JavaScript.

A closure occurs when a function remembers variables from its outer scope even after the outer function has finished executing.

Example:

function outer() {
  let count = 0;

  function inner() {
    count++;
    console.log(count);
  }

  return inner;
}

const counter = outer();
counter(); // 1
counter(); // 2

Even though outer() has already executed, the inner function still has access to the count variable.

Closures are commonly used in:

• event handlers

• callbacks

• maintaining a private state

A simple but useful JavaScript exercise is reversing a string.

Example:

function reverseString(str) {
  let newString = "";

  for (let i = str.length - 1; i >= 0; i--) {
    newString += str[i];
  }

  return newString;
}

Example output:

reverseString("hello") // "olleh"

Exercises like this help reinforce core JavaScript logic.

Another common programming exercise is generating the Fibonacci sequence.

In the Fibonacci sequence, each number is the sum of the two preceding numbers.

Example sequence:

0, 1, 1, 2, 3, 5, 8, 13...

Example implementation:

function fibonacci(n) {
  let a = 0;
  let b = 1;

  for (let i = 0; i < n; i++) {
    console.log(a);
    let next = a + b;
    a = b;
    b = next;
  }
}

This iterative approach is efficient and easy to understand.

Revisiting these concepts reminded me how important the fundamentals are in frontend development. Even when we work with frameworks and libraries daily, understanding the core ideas behind them makes problem-solving much easier.

I plan to continue documenting concepts like these as I revisit different areas of frontend development.

Quote:- "The fundamentals are the foundation of everything great in software."

HAPPY CODING!!! ❤️