Forem: Marvin Roque

useEffect: Side Effects in React

Marvin Roque — Tue, 18 Feb 2025 02:52:49 +0000

After watching myself struggle with useEffect, let me break down what's actually happening under the hood.

The Lifecycles You Need to Know

Think of your component like a house:

Mounting = Building the house (component first appears)
Rendering = Redecorating (component updates)
Unmounting = Demolishing (component disappears)

Here's how useEffect works with each:

function App() {
  useEffect(() => {
    console.log('🏗️ House built! (Mounted)');

    return () => {
      console.log('🏚️ House demolished! (Unmounted)');
    };
  }, []); // Empty array = only on mount/unmount

  useEffect(() => {
    console.log('🎨 Redecorating! (Re-rendered)');
  }); // No array = every render

  return <div>Hello!</div>;
}

When Effects Actually Run

Here's what happens in real life:

function RoomLight({ isOn }) {
  // 1. Runs after mount AND when isOn changes
  useEffect(() => {
    console.log(`Light turned ${isOn ? 'on' : 'off'}`);
  }, [isOn]);

  // 2. Runs after EVERY render
  useEffect(() => {
    console.log('Room redecorated');
  }); // No dependency array

  // 3. Runs ONCE after mount
  useEffect(() => {
    console.log('Room built');
  }, []); // Empty dependency array

  return <div>Room</div>;
}

Cleanup (The Important Part)

Here's when you need cleanup:

Timers
Subscriptions
Event listeners
WebSocket connections

function Timer() {
  useEffect(() => {
    // Set up
    const timer = setInterval(() => {
      console.log('Tick');
    }, 1000);

    // Clean up
    return () => {
      clearInterval(timer); // Prevents memory leaks
    };
  }, []); // Only on mount
}

function WindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    // Set up
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);

    // Clean up
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // Only on mount
}

Common Gotchas I Hit

1. Missing Dependencies

function Counter({ start }) {
  const [count, setCount] = useState(start);

  // Wrong - doesn't update when start changes
  useEffect(() => {
    setCount(start);
  }, []); // Lint will warn you

  // Right - updates when start changes
  useEffect(() => {
    setCount(start);
  }, [start]);
}

2. Running Too Often

function Profile({ user }) {
  // Bad - new object every render
  useEffect(() => {
    console.log('Profile updated');
  }, [{ name: user.name }]); // Runs every time!

  // Good - only when name changes
  useEffect(() => {
    console.log('Profile updated');
  }, [user.name]);
}

Quick Tips

The cleanup function runs before the effect runs again
Dependencies should include everything that changes
Empty array = mount/unmount only
No array = every render
When in doubt, let the linter guide you

Mental Model

Think of it this way:

useEffect(() => {
  // This runs AFTER render
  console.log('Effect happened');

  return () => {
    // This runs BEFORE next effect or unmount
    console.log('Cleanup happened');
  };
}, [/* dependencies change = effect runs again */]);

That's useEffect stripped down to what matters. Still confused about something? Drop a comment - I love debugging these things.

Follow for more React tips from the trenches 🎯

React State: useState Explained Simply

Marvin Roque — Tue, 11 Feb 2025 01:54:55 +0000

Look, I get it. React state is confusing at first. I spent way too many hours wondering why my components weren't updating properly. Let me save you that headache and break down useState in a way that actually makes sense.

What Even is State?

It's just data that changes. That's it. Think of it like variables that React watches. When they change, your component updates.

Here's a dead-simple counter:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  // count = the number
  // setCount = how we change it

  return (
    <div>
      <p>Clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        +1
      </button>
    </div>
  );
}

Updating State (The Way That Actually Works)

I kept messing this up when I started. Here's what not to do:

// 🤦‍♂️ This bit me so many times
const [score, setScore] = useState(0);
setScore(score + 1);
setScore(score + 1);
// Only goes up by 1... why??

Here's how to fix it:

const [score, setScore] = useState(0);
// This actually works
setScore(oldScore => oldScore + 1);
setScore(oldScore => oldScore + 1);
// Now it goes up by 2!

Stuff I Keep Messing Up

Objects Are Tricky

// Don't do what I did:
const [user, setUser] = useState({ name: 'Sam', level: 1 });
user.level = 2;  // Looks right, but doesn't work!

// Do this instead:
setUser({ ...user, level: 2 });  // This works

Checking New Values

// This drove me nuts for hours:
setCount(count + 1);
console.log(count);  // Still the old number!

// What actually works:
setCount(count + 1);
useEffect(() => {
  console.log(count);  // Now we see the new number
}, [count]);

Heavy Calculations

// This slows things down:
const [data, setData] = useState(heavyCalculation());

// Much better:
const [data, setData] = useState(() => heavyCalculation());

Quick Things I Learned The Hard Way

Use prev => ... when updating based on old values
Never put useState in if statements
Keep it simple - split big state objects if they get messy
Group related state together in one object

Put It All Together

Here's a real example I use a lot:

function GameScore() {
  const [game, setGame] = useState({
    score: 0,
    highScore: 0
  });

  const addPoints = (points) => {
    setGame(prev => ({
      ...prev,
      score: prev.score + points,
      highScore: Math.max(prev.highScore, prev.score + points)
    }));
  };

  return (
    <div>
      <p>Current: {game.score}</p>
      <p>Best: {game.highScore}</p>
      <button onClick={() => addPoints(10)}>
        Get Points
      </button>
    </div>
  );
}

That's pretty much it! Hit me up if you have questions. I'll probably add more examples as I think of them.

Follow if this helped! More real-world React tips coming soon 🚀

JavaScript Destructuring: Write Less, Do More

Marvin Roque — Tue, 04 Feb 2025 15:28:08 +0000

Ever find yourself typing user.name, user.email over and over? Let's fix that with destructuring! Here's how to make your JavaScript cleaner and more readable.

Object Destructuring

// Instead of this:
const name = user.name;
const email = user.email;
// Do this:
const { name, email } = user;
// Need different variable names?
const { name: userName, email: userEmail } = user;

Setting Default Values

const user = { name: 'Alex' };
// If age doesn't exist, use 25
const { name, age = 25 } = user;
console.log(age); // 25

Array Destructuring Magic

const colors = ['red', 'blue', 'green'];
// Get first two colors
const [primary, secondary] = colors;
// Skip elements using commas
const [first, , third] = colors;
// Rest operator for remaining items
const [head, ...rest] = colors;
console.log(rest); // ['blue', 'green']

Function Parameters

// Before
function showUser(user) {
  console.log(`${user.name} (${user.age})`);
}
// After
function showUser({ name, age }) {
  console.log(`${name} (${age})`);
}
// With default values
function greet({ name = 'Guest', age = 20 } = {}) {
  console.log(`Hello ${name}!`);
}

Quick Tricks

// Nested objects
const { 
  name, 
  address: { city, country } 
} = user;
// Combine with renaming
const { 
  address: { city: userCity } 
} = user;
// Swap variables
let a = 1, b = 2;
[a, b] = [b, a];

When to Use It

Processing API responses (clean up nested JSON data)
Configuration objects (extract specific settings)
Function parameters (simplify complex parameter objects)
Module imports (select specific exports)
Data transformation (reshape objects and arrays)
Event handling (extract specific properties from event objects)

That's all! Now go make your code cleaner! 🧹✨

React Props Explained Simply: Passing Data Between Components

Marvin Roque — Tue, 04 Feb 2025 02:39:18 +0000

Hey there! 👋 back with another React post. Today, let's talk about props - they're just like passing notes between components!

What Are Props?

Props are React's way of sending data from one component to another. Think of them like passing arguments to a function, but for components.

Here's a simple example:

function Welcome({ name }) {
  return <h1>Hey, {name}!</h1>;
}

// Using it:
function App() {
  return (
    <div>
      <Welcome name="React Friend" />
    </div>
  );
}

Making Components Flexible

Let's make something more useful - a simple card component:

function Card({ title, description, buttonText }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <p>{description}</p>
      <button>{buttonText}</button>
    </div>
  );
}

// Using our card:
<Card 
  title="My First Card" 
  description="This is awesome!" 
  buttonText="Click me"
/>

Default Props

Sometimes people might forget to pass props. We can handle that:

function Card({ title = "Default Title", description = "No description provided" }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  );
}

Cool Patterns I Use

1. Object Props

When you have lots of props:

function UserCard({ user }) {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

// Using it:
<UserCard user={{ name: "Alex", email: "alex@email.com" }} />

2. Children Props

For flexible content:

function Container({ children }) {
  return (
    <div className="container">
      {children}
    </div>
  );
}

// Using it:
<Container>
  <h1>Any content here!</h1>
  <p>Works great!</p>
</Container>

Quick Tips!

Props are read-only - don't try to change them!
Use clear prop names that make sense
Keep your components simple
Default props save you from errors

That's it for props! Not so scary after all, right?

Drop a comment if you make something cool with these patterns! 🚀

Found this helpful? Follow for more React tips!

Creating Your First React Component (It's Easier Than You Think!)

Marvin Roque — Sat, 01 Feb 2025 05:38:44 +0000

Hey everyone! 👋 Been playing with React lately and wanted to share how to create your first component. Trust me, it's simpler than you might think!

Quick Setup with Vite

First things first, let's set up our project. Vite makes this super easy:

npm create vite@latest my-first-react -- --template react
cd my-first-react
npm install
npm run dev

That's it! Your project is running. Pretty cool, right?

Creating Your First Component

Let's make something simple - a greeting card. Create a new file called GreetingCard.jsx:

function GreetingCard() {
  return (
    <div>
      <h2>Hello React!</h2>
      <p>This is my first component</p>
    </div>
  );
}

export default GreetingCard;

To use it, open your App.jsx and add:

import GreetingCard from './GreetingCard'

function App() {
  return (
    <div>
      <GreetingCard />
    </div>
  );
}

export default App;

Making it More Interesting

Let's make our card accept some info:

function GreetingCard({ name, message }) {
  return (
    <div>
      <h2>Hello, {name}!</h2>
      <p>{message}</p>
    </div>
  );
}

// Using it:
<GreetingCard 
  name="World" 
  message="Welcome to React" 
/>

Quick Things I Learned

Components are just functions that return JSX
JSX looks like HTML but lives in your JavaScript
Component names must start with a capital letter
Components need to return a single parent element

Give it a Try!

Try making your own component! Maybe a simple profile card or a todo item? It's all about starting small and building up.

See you in the next post! 🚀

If you found this helpful, follow along for more React tips!

Modern Array Methods That Will Make Your Life Easier

Marvin Roque — Wed, 29 Jan 2025 05:08:25 +0000

Remember the days of writing endless for loops to work with arrays? Yeah, those days are over. Let's look at some array methods that'll make your code cleaner and your life easier!

The Power Trio: map, filter, reduce

map: Transform Everything! 🎨

// Old way 😫
const numbers = [1, 2, 3];
const doubled = [];
for(let i = 0; i < numbers.length; i++) {
    doubled.push(numbers[i] * 2);
}

// New way 😎
const doubled = numbers.map(num => num * 2);
// [2, 4, 6]

filter: Keep What You Need! 🎯

const ages = [15, 25, 35, 12, 40];
const adults = ages.filter(age => age >= 18);
// [25, 35, 40]

reduce: The Swiss Army Knife! 🔪

const cart = [
    { item: "Shoes", price: 50 },
    { item: "Hat", price: 25 },
    { item: "Socks", price: 5 }
];
const total = cart.reduce((sum, item) => sum + item.price, 0);
// 80

The Search Party: find, some, every

find: First Match Wins! 🎯

const users = [
    { id: 1, name: "Alice" },
    { id: 2, name: "Bob" },
    { id: 3, name: "Charlie" }
];
const bob = users.find(user => user.name === "Bob");
// { id: 2, name: "Bob" }

some: Any Match? 🤔

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

every: All Match? ✅

const ages = [19, 21, 25, 35];
const allAdults = ages.every(age => age >= 18);
// true

Real World Examples That'll Click

Building a Shopping Cart

const cart = [
    { id: 1, item: "T-Shirt", price: 20, quantity: 2 },
    { id: 2, item: "Jeans", price: 50, quantity: 1 }
];

// Calculate total
const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);

// Get item names
const items = cart.map(item => item.item);

// Find expensive items
const expensive = cart.filter(item => item.price > 30);

User Management

const users = [
    { id: 1, name: "Alice", role: "admin" },
    { id: 2, name: "Bob", role: "user" },
    { id: 3, name: "Charlie", role: "user" }
];

// Check if we have any admins
const hasAdmin = users.some(user => user.role === "admin");

// Get all user names
const names = users.map(user => user.name);

// Find specific user
const alice = users.find(user => user.name === "Alice");

Pro Tips 🎯

Chain methods for complex operations:

const result = numbers
    .filter(n => n > 0)
    .map(n => n * 2)
    .reduce((sum, n) => sum + n, 0);

Use descriptive variable names in callbacks:

// Good
users.filter(user => user.isActive)

// Not so good
users.filter(x => x.isActive)

Remember that these methods don't modify the original array!

When to Use What?

map: When you need to transform every item
filter: When you need to remove unwanted items
reduce: When you need to combine values
find: When you need the first match
some: When you need to check if ANY item matches
every: When you need to check if ALL items match

That's it! These methods might seem a bit weird at first, but trust me - once you get used to them, you'll never want to write another for loop again!

Got any cool uses for these methods? Drop them in the comments below! 👇

Follow for more JavaScript tips that'll make your code cleaner and your life easier! ✨

JavaScript Object Manipulation: Your Survival Guide

Marvin Roque — Sat, 25 Jan 2025 12:32:42 +0000

JavaScript objects are like clay - they can be shaped, protected, and copied in ways you might not expect. Let's break down the magic!

Protecting Your Objects: Freeze vs Seal

Object.freeze() 🧊

const frozenObject = { name: "Elsa" };
Object.freeze(frozenObject);

frozenObject.name = "Anna"; // Nope! 
console.log(frozenObject.name); // Still "Elsa"

Object.seal() 🛡️

const sealedObject = { name: "Jack" };
Object.seal(sealedObject);

sealedObject.name = "New Name"; // Works
sealedObject.age = 30; // Blocked!

Key Difference:

freeze(): Prevents ALL changes
seal(): Allows value modifications, blocks new properties

Cloning: Shallow vs Deep

Shallow Clone

const original = { 
    user: { name: "Alice" },
    age: 30 
};
const shallowCopy = { ...original };

shallowCopy.user.name = "Bob";
console.log(original.user.name); // "Bob" (!) - nested objects still linked

Deep Clone

const deepCopy = JSON.parse(JSON.stringify(original));
// Now changes to nested objects won't affect the original

Immutability Patterns

// Immutable update
const updateUser = (user, updates) => ({
    ...user,
    ...updates
});

const alice = { name: "Alice", age: 30 };
const updatedAlice = updateUser(alice, { age: 31 });

Quick Tips

Use freeze() for constants
Deep clone with JSON.parse(JSON.stringify())
Spread operator for non-nested immutable updates
Consider libraries like Immer for complex immutability

Immutability isn't just a technique - it's a mindset. Protect your data, keep your code predictable! 🚀

Have a mind-bending object manipulation story? Drop it in the comments! 👇

Liked this deep dive? Follow for more JavaScript insights!

JavaScript Hoisting: The Weird Thing That's Probably Breaking Your Code

Marvin Roque — Sun, 19 Jan 2025 11:05:39 +0000

Ever had a JavaScript bug where your code seems to run in the wrong order? You might be dealing with hoisting - one of JavaScript's quirky behaviors that can drive developers crazy. Let's break it down in plain English!

The "What in the World?" Moment

Picture this: you're writing some code, and this happens:

console.log(message);  // undefined (but no error 🤔)
var message = "Hello!";

console.log(anotherMessage);  // Error! 💥
let anotherMessage = "Hi!";

If you're scratching your head wondering why the first log gives you undefined instead of an error, welcome to the wild world of hoisting!

What's Actually Happening?

Think of JavaScript as an overeager assistant who reads through your code before running it. When it sees var declarations, it goes "Oh! I'll make a note of these variables right now!" and moves them to the top - but without their values.

Here's what JavaScript actually sees in the first example:

var message;  // JavaScript moved this up!
console.log(message);  // undefined
message = "Hello!";    // Now we assign the value

The Plot Twist: Functions Are Different

Function declarations get the VIP treatment - they're hoisted completely:

sayHi();  // This works! 🎉
function sayHi() {
    console.log("Hello there!");
}

sayBye();  // Error! 💥
const sayBye = () => {
    console.log("Goodbye!");
}

Why? Because function declarations are hoisted with their entire body, while function expressions (like our sayBye arrow function) follow the same rules as variables.

The Modern Way: let and const Save the Day

let and const have a different attitude. They say "No way!" to this hoisting business:

// This creates what we call the "temporal dead zone" ⚠️
console.log(name);  // Error!
let name = "Alice";

console.log(age);   // Error!
const age = 25;

How to Write Better Code (And Keep Your Sanity)

Here's my personal checklist to avoid hoisting headaches:

Declare First, Use Later

// Good ✅
const name = "Alice";
console.log(name);

// Not so good ❌
console.log(name);
var name = "Alice";

Use const and let

// Modern and clear ✅
const PI = 3.14;
let counter = 0;

// Old school and potentially confusing ❌
var PI = 3.14;
var counter = 0;

Keep Function Declarations at the Top

// Functions at the top = happy code 😊
function initialize() {
    // ...
}

function process() {
    // ...
}

// Then use them
initialize();
process();

The Bottom Line

Hoisting is like that one weird rule in a board game that nobody likes but everyone needs to know about. The good news? Stick to const and let, declare things before using them, and you'll rarely have to worry about it!

Quick tip: When in doubt, just remember this mantra: "Declare before use, and stick to const/let!"

Got any hoisting horror stories? Drop them in the comments below - we've all been there! 😅

Found this helpful? Give it a like and follow for more JavaScript explanations that won't make your head spin!

JavaScript Closures: They're Not as Scary as You Think!

Marvin Roque — Fri, 17 Jan 2025 06:34:54 +0000

Hey there, fellow JavaScript enthusiasts! 👋 Remember struggling with scope in JS? Well, get ready because today we're leveling up with closures. Don't worry – I promise to make this as painless as possible!

What's a Closure ?

Think of a closure like a backpack that a function carries around. This backpack contains all the variables that existed in the environment where the function was created. Pretty neat, right?

Here's a super simple example:

function createGreeting(name) {
    // This variable is in the backpack!
    const message = "Hello, ";

    return function() {
        // See? We can still use 'message' here
        console.log(message + name);
    }
}

const greetBob = createGreeting("Bob");
greetBob(); // Prints: "Hello, Bob"

Why Should You Care?

Here's the cool part – closures let us do some really useful things in our code:

Private Variables (Like a Secret Diary 🤫)

function createCounter() {
    let count = 0;  // This is our secret!

    return {
        increment() { count++ },
        getCount() { return count }
    };
}

const counter = createCounter();
counter.increment();
console.log(counter.getCount()); // 1
// console.log(count); // Error! Can't access it directly

Function Factories (Like a Magic Spell Creator ✨)

function createMultiplier(multiplier) {
    return (number) => number * multiplier;
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5));  // 10
console.log(triple(5));  // 15

Quick Memory Tips

Just remember that closures keep variables around, so they use a bit more memory. It's like keeping a book in your backpack – it takes up space! If you create thousands of closures, maybe consider a different approach.

// Careful with this in loops!
for (let i = 0; i < 1000; i++) {
    const heavyClosure = createBigClosure(); // 🚫 Memory adds up!
}

The "Aha!" Moment

Here's something that blew my mind when I first learned about closures – they can help us avoid global variables and keep our code clean. Instead of polluting the global scope with variables, we can use closures to keep things organized:

const todoApp = (function() {
    const tasks = [];  // Private!

    return {
        addTask(task) { tasks.push(task) },
        getTasks() { return [...tasks] }
    };
})();

todoApp.addTask("Learn closures");
console.log(todoApp.getTasks());  // ["Learn closures"]

Wrapping Up

And there you have it! Closures might seem tricky at first, but they're just functions with backpacks full of variables. Use them for:

Creating private variables
Making function factories
Keeping your code organized

Just remember to be mindful of memory usage, and you're golden!

What's your favorite use for closures? Drop a comment below – I'd love to hear your thoughts!

Happy coding! 🚀

Found this helpful? Follow me for more JavaScript tips and tricks that won't make your brain hurt!

Understanding var, let, and const in JavaScript: A Comprehensive Guide

Marvin Roque — Tue, 14 Jan 2025 13:40:15 +0000

JavaScript offers three ways to declare variables: var, let, and const. Understanding the differences between these keywords is essential for writing clean, maintainable, and bug-free code. This post explores the distinctions in scope, reassignment and redeclaration, and the best practices for using each declaration type.

1. Scope: Where Are Variables Accessible?

The scope of a variable determines where it can be accessed in your code. Here’s how the three keywords differ:

var: Function-Scoped
• Variables declared with var are accessible throughout the entire function in which they are declared.
• If used outside a function, var becomes globally scoped.
• This behavior can lead to unintended variable overwrites in larger codebases.

Example:

function example() {
    if (true) {
        var x = 10;
    }
    console.log(x); // 10
}
example();

let and const: Block-Scoped

• Variables declared with let or const are restricted to the block (e.g., { }) where they are defined.
• This makes them safer for use in control structures like if statements or for loops.

Example:

function example() {
    if (true) {
        let x = 10;
        const y = 20;
    }
    console.log(x); // ReferenceError: x is not defined
    console.log(y); // ReferenceError: y is not defined
}
example();

2. Reassignment and Redeclaration

Another key difference lies in how variables can be reassigned or redeclared:

var
• Allows both reassignment and redeclaration within the same scope.
• This flexibility can cause bugs in larger projects.

Example:

var x = 5;
var x = 10; // No error
x = 15; // Reassignment is allowed
console.log(x); // 15

let
• Allows reassignment but not redeclaration within the same scope.
• Attempting to redeclare a let variable results in a syntax error.

Example:

let x = 5;
x = 10; // Reassignment is allowed
let x = 15; // SyntaxError: Identifier 'x' has already been declared

const
• Does not allow reassignment or redeclaration once initialized.
• However, if a const variable is an object or array, its contents can be modified.

Example:

const x = 5;
x = 10; // TypeError: Assignment to constant variable

const arr = [1, 2, 3];
arr.push(4); // Modifies the array
console.log(arr); // [1, 2, 3, 4]

3. Best Practices for Modern JavaScript

Given the differences in behavior, the following best practices are recommended for variable declaration in JavaScript:
1. Use const for Values That Should Not Change
• If a variable’s value will remain constant throughout its lifecycle, use const.
2. Use let for Reassignable Variables
• For variables that may need to be updated later, use let.
3. Avoid Using var
• The use of var is discouraged in modern JavaScript because of its function-scoping and hoisting behavior, which can lead to unexpected bugs.

Conclusion

Understanding the nuances of var, let, and const is critical for writing clear and reliable JavaScript code. By using let and const as your standard variable declarations and avoiding var, you can create code that is easier to maintain and less prone to errors.

What are your experiences with these keywords? Share your thoughts in the comments below!