DEV Community: Elnara

React Components: Functional vs. Class 🚀

Elnara — Sat, 21 Jun 2025 22:31:39 +0000

Let's make React components super easy to understand! We've got two main types: Functional Components and Class Components. Think of them as two ways to build your UI pieces.

1. Making a Basic Component 🏗️

Functional Component: Simple JavaScript Function

This is a normal JavaScript function that gives you back UI.

How to make:
- Write an arrow function.
- Give it a name (that's your component!).
- It returns some JSX (your UI bits).
Export/Import: Works just like any other JavaScript file. Easy peasy!

import React, { useState, useEffect } from 'react';

const MyAwesomeFunctionComponent = () => {
    return (
        <>
            <h1>Hello from Functional Fun! 👋</h1>
        </>
    );
};

export default MyAwesomeFunctionComponent;

Class Component: Normal JavaScript Class

This is a normal JavaScript class that extends React.Component.

How to make:
- Make a class that extends React.Component.
- It must have a render() method inside that returns JSX.
Export/Import: Same as Functional Components.

import React from 'react';

class MyCoolClassComponent extends React.Component {
    render() {
        return (
            <>
                <h1>Hello from Classy Code! 🎩</h1>
            </>
        );
    }
}

export default MyCoolClassComponent;

2. Sending Data with Props 🎁

Props are how you send information from a parent component down to its child.

Functional Component: Props as Arguments

Props come as an argument to your function. Grab them directly!

const FunctionalComponent = ({ name, location }) => { // Props are right here!
    return (
        <>
            <p>Name: {name}</p>
            <p>Location: {location}</p>
        </>
    );
};

export default FunctionalComponent;

// How you'd use it: <FunctionalComponent name="Alice" location="Wonderland" />

Class Component: Props with `this.props`

For Class Components, props are in this.props. You'll need a constructor.

Constructor magic: The constructor gets props before render.
super(props) is key! ✨ You must write super(props). This ensures this.props is ready to use everywhere in your component.

import React from 'react';

class UserClass extends React.Component {
    constructor(props) {
        super(props); // ✨ IMPORTANT: Makes props available with 'this.props'
    }

    render() {
        const { name, location } = this.props; // Access props using 'this.props'
        return (
            <>
                <h2>Class Based User</h2>
                <p>Name: {name}</p>
                <p>Location: {location}</p>
            </>
        );
    }
}

export default UserClass;

// How you'd use it: <UserClass name="Bob" location="Builderland" />

3. Handling Changing Data with State 🔄

State is like a component's personal memory. It tracks data that changes, updating the UI.

Functional Component: `useState` Hook

The useState "Hook" adds memory to functional components.

Making state: const [thing, setThing] = useState(initialValue);
- thing is your current value.
- setThing is the function to change it.
Using state: Just use thing.
Updating state: Call setThing(newValue);

import React, { useState } from 'react';

const FunctionalComponent = ({ name, location }) => {
    const [count, setCount] = useState(0); // 'count' is state, 'setCount' updates it

    return (
        <>
            <p>{name}</p>
            <p>Count: {count} 🔢</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
            <p>{location}</p>
        </>
    );
};

export default FunctionalComponent;

Class Component: `this.state` & `this.setState`

In Class Components, state is a big object: this.state.

Making state: Put this.state = { ... }; in the constructor (when the class starts).

// Inside your Class Component's constructor
this.state = {
    count: 0, // Your state variable
    userName: "Guest", // Can have many!
};

Using state: Access as this.state.count or destructure: const { count } = this.state;.
Updating state: NEVER change this.state.count = this.state.count + 1 directly! 🚫 Use this.setState().
- this.setState() takes an object with new state values.

import React from 'react';

class UserClass extends React.Component {
    constructor(props) {
        super(props);
        // Creating state variables inside the constructor
        this.state = {
            count: 0,
        };
    }

    render() {
        const { name, location } = this.props;
        const { count } = this.state; // Grab 'count' from state

        return (
            <>
                <h2>Class Based Component</h2>
                <p>Name: {name}</p>
                <p>Location: {location}</p>
                <p>Count: {count} 🔢</p>
                <button
                    onClick={() => {
                        // Updating state variables using this.setState()
                        this.setState({
                            count: this.state.count + 1,
                        });
                    }}
                >
                    Increment
                </button>
            </>
        );
    }
}

export default UserClass;

4. Talking to the Outside World: API Calls and Side Effects 🌐

Sometimes, components need to do things beyond rendering UI, like fetching internet data. These are "side effects".

Functional Component: `useEffect` Hook for API Calls

useEffect is your tool for side effects like API calls in functional components.

Why useEffect? Component shows up fast, then useEffect fetches data and updates the display.
When it runs for API calls:
- Use [] as the second argument. This makes the effect run only once after the first render. Perfect for fetching initial data!

import React, { useState, useEffect } from 'react';

const FunctionalComponent = ({ name, location }) => {

    // State to hold GitHub user data
    const [githubUser, setGithubUser] = useState(null);

    // 📞 GitHub User API Call (runs once on page load)
    useEffect(() => {
        const fetchGithubUser = async () => {


                // Fetch data for a specific GitHub user (e.g., 'octocat')
                const response = await fetch('https://api.github.com/users/octocat');
                const data = await response.json();
                setGithubUser(data); // Set fetched data to state

        };
        fetchGithubUser();
    }, []); // 🚨 Empty array means: Run ONLY once after the first render

    return (
        <>
            <p>{name}</p>
            <p>{location}</p>

            {/* Display GitHub user info if available */}
            {githubUser && (
                <div>
                    <h3>GitHub User Info:</h3>
                    <p>Username: **{githubUser.login}**</p>
                    <p>Name: {githubUser.name || 'N/A'}</p>
                    <p>Bio: {githubUser.bio || 'No bio provided.'}</p>
                    <p>Public Repos: {githubUser.public_repos}</p>
                    <p>Followers: {githubUser.followers}</p>
                </div>
            )}
        </>
    );
};

export default FunctionalComponent;

Class Component: Life Cycle Methods

Class Components have special methods called Life Cycle Methods that run at different moments in their "life."

5. Class Component Life Cycle (The Component's Journey)

A component has three main phases:

Mounting: When it first appears on your screen. 🚀
Updating: When its data (state or props) changes and it needs to refresh. 🔄
Unmounting: When it disappears from your screen. 🧹

5.1. Mounting Life Cycle (When it appears 🚀)

When a Class Component mounts:

constructor(): First thing called! Sets up initial state.
render(): Draws the component (might show empty data first).
componentDidMount(): Called after the component (and its children) are fully visible.componentDidMount is the Best place for API calls. Fetch real data here; component is visible, update state to re-render.

Actual Flow:

Parent constructor
Parent render (Parent starts drawing)
- First Child constructor
- First Child render
- Second Child constructor
- Second Child render
- React updates the actual web page (DOM) ✨ (This is the fast part where React figures out changes)
- First Child componentDidMount (First child is ready)
- Second Child componentDidMount (Second child is ready)
Parent componentDidMount (Parent is ready, after all its kids)

import React from 'react';

class UserClass extends React.Component {
    constructor(props) {
        super(props);

        console.log("UserClass: Constructor called.");
    }

    componentDidMount() {
        console.log("UserClass: componentDidMount called. data!");
        /

        // ⏰ Setting up an interval (will need cleanup!)
        this.timer = setInterval(() => {
            console.log('Hello from Class Component interval!');
        }, 1000);
    }

    render() {
        const { name, location } = this.props;

        console.log("UserClass: Render called.");

        return (
            <>
                <h2>Class Based Component (Life Cycle Demo)</h2>
                <p>Name: {name}</p>
                <p>Location: {location}</p>


            </>
        );
    }
}

export default UserClass;

5.2. Updating Life Cycle (When it changes 🔄)

When component data (state or props) changes, it refreshes:

render(): Called again with new props/state.
componentDidUpdate(prevProps, prevState): Called right after update. You get old props/state. Handy for doing something only if specific data changed.
componentDidUpdate(prevProps, prevState) : Calling this.setState in componentDidUpdate must be in an if statement to prevent endless loops.

// Inside your UserClass component...

componentDidUpdate(prevProps, prevState) {
    console.log("UserClass: componentDidUpdate called.");
    // Example: Fetch new data ONLY if 'location' prop changed
    if (this.props.location !== prevProps.location) {
        console.log("Location changed! Need new data...");
        // Call your API function here
    }

    // Example: Do something if 'count' state changed
    if (this.state.count !== prevState.count) {
        console.log("Count just changed to:", this.state.count);
    }
}

5.3. Unmounting Life Cycle (When it disappears 🧹)

When a component is removed from the screen (e.g., navigating away):

componentWillUnmount(): Called just before the component vanishes. Cleanup Time🧼 You must cleanup anything running in the background like a setInterval. Stop these processes here.

// Inside your UserClass component...

componentWillUnmount() {
    console.log("UserClass: componentWillUnmount called. Time to clean up! 🧹");
    clearInterval(this.timer); // Stop the timer we started in componentDidMount
}

Cleanup: How it Works in Both Types 🤔

Handling background tasks (like timers or subscriptions) is crucial to prevent performance issues, especially in Single Page Applications (SPAs). Here's how cleanup is managed in both component types:

Functional Components (using `useEffect`'s return)

If your useEffect sets up an ongoing task (like setInterval or an event listener), you return a function from useEffect.
This returned function automatically runs when the component unmounts (is removed from the screen) or just before the effect runs again (if its dependencies change).

Example: Stopping a timer

useEffect(() => {
    const timer = setInterval(() => {
        console.log('Functional component interval running!');
    }, 1000);

    return () => { // This is the cleanup function!
        clearInterval(timer); // Stops the timer
        console.log('Functional component interval cleaned up! 👋');
    };
}, []); // Empty array means runs once on mount, cleans up on unmount

Class Components (using `componentWillUnmount`)

If you set up an ongoing task in componentDidMount (or other lifecycle methods), you must manually stop it in the componentWillUnmount() method.
This method is specifically designed to run just before the component is completely removed from the DOM.

Example: Stopping a timer

class MyClassComponent extends React.Component {
    componentDidMount() {
        this.timer = setInterval(() => {
            console.log('Class component interval running!');
        }, 1000);
    }

    componentWillUnmount() { // This is the cleanup method!
        clearInterval(this.timer); // Stops the timer
        console.log('Class component interval cleaned up! 🧹');
    }
    // ... render method ...
}

Why Cleanup is Super Important: Any background task (like a timer) started in a component will keep running in memory even after the component is gone if not stopped. This causes performance problems in Single Page Applications (SPAs). Always clean up!

Conclusion: Which One to Use? 🤔

While Class Components were the original way, Functional Components with Hooks (like useState and useEffect) are now the modern, recommended way in React!

They are:

Simpler: Less code, easier to read.
Cleaner: Logic for one feature stays together.
Modern: The way forward in React development.

But hey, knowing Class Components is still super useful for understanding old code or if you just prefer that style for certain things!

Boost your confidence with these top-notch interview questions and nail your next opportunity.

Elnara — Wed, 23 Aug 2023 17:22:18 +0000

📣 Sharpen your skills with these frontend interview questions! 🧠💻Looking to excel in your next frontend developer interview? Enhance your preparation by familiarizing yourself with these essential frontend interview questions.

1. HTML:

What are semantic HTML elements, and why are they important?
Explain the difference between <div> and <span> elements.
What's the purpose of the alt attribute in <img> tags?
How does the viewport meta tag affect a web page's layout?

2. CSS:

Describe the CSS box model and its components.
What is the difference between margin and padding in CSS?
Explain the concept of CSS specificity.
How do you center an element horizontally and vertically using CSS?

3. JavaScript:

What is event delegation, and why is it useful?
Explain the difference between null and undefined in JavaScript.
How does JavaScript handle asynchronous programming, and what are Promises?
What is a closure in JavaScript, and why is it important?

4. CSS Preprocessors:

What is SASS/SCSS, and why would you use it in a project?
Describe the benefits of using a CSS preprocessor like LESS or SASS.
How do you nest styles in SASS/SCSS?

5. Responsive Web Design:

What is responsive web design, and how do you achieve it with CSS?
Explain the difference between a fluid layout and a responsive layout.
What are media queries, and how are they used?

6. JavaScript Frameworks and Libraries:

What is the difference between React and Angular?
Explain the Virtual DOM and its role in React.
What is state management in a frontend framework, and why is it important?

7. Version Control:

How does Git work, and what are some commonly used Git commands?
What is a merge conflict, and how can it be resolved?

8. Web Performance:

What are some techniques for optimizing website performance?
How does lazy loading of assets improve page load times?
Explain the importance of minimizing HTTP requests.

9. Accessibility:

What is web accessibility, and why is it important?
How can you make a website more accessible to users with disabilities?
What are ARIA roles in HTML, and when should you use them?

10. Testing and Debugging:
- What is unit testing, and how can it be applied to frontend development?
- How do you debug JavaScript code in the browser developer tools?
- Explain the purpose of browser compatibility testing.

11. Build Tools and Task Runners:
- What are build tools like Webpack used for in frontend development?

How does Babel fit into the modern JavaScript development workflow?
- What is the purpose of a task runner like Grunt or Gulp?

12. Cross-Browser Compatibility:
- How do you ensure that a website works consistently across different browsers?
- What are some common challenges when developing for older versions of Internet Explorer?

13. Frontend Security:
- What are some common security vulnerabilities in frontend development, and how can you prevent them?

These questions cover a broad spectrum of topics that frontend developers should be familiar with. Be prepared to discuss your experiences, provide examples, and even solve coding challenges related to these concepts during your interview.

Remember, staying curious and continuously honing our abilities is the key to unlocking great opportunities in the tech industry. Let's embark on this learning journey together! 📚✨

Become a Frontend Magician: Unlock the Magic with These Essential Tips!

Elnara — Sun, 23 Jul 2023 18:16:01 +0000

Hello Frontend wizards!

If you yearn to tread the path of a frontend virtuoso, let these pearls of wisdom be your guiding stars on the journey to mastering the art of crafting captivating user experiences.

1- Build a Solid Foundation: Start by mastering the core technologies of frontend development, such as HTML, CSS, and JavaScript. These form the building blocks of web development and are essential for creating user interfaces.

2- Learn Responsive Web Design:Understand the principles of responsive web design to create websites that adapt seamlessly to different screen sizes and devices. Mobile responsiveness is crucial in today's digital landscape.

3- Practice Regularly:Consistent practice is key to improving your frontend skills. Work on small projects, recreate existing websites, or contribute to open-source projects to gain hands-on experience.

4- Stay Updated with Latest Trends:Frontend technologies evolve rapidly. Keep yourself updated with the latest trends, frameworks, and tools by following industry blogs, attending webinars, and participating in developer communities.

5- Experiment and Explore:Don't be afraid to experiment with new libraries, frameworks, and design patterns. Exploration is a great way to discover innovative solutions and grow as a developer.

6- Use Version Control (Git):Learn to use version control systems like Git. This allows you to track changes in your code, collaborate with others, and easily revert to previous versions if needed.

7- Understand Cross-Browser Compatibility:Ensure your websites work consistently across different web browsers, such as Chrome, Firefox, Safari, and Edge. Test your projects on multiple browsers to identify and fix any compatibility issues.

8- Accessibility Matters:Learn about web accessibility standards and best practices to ensure your websites are inclusive and usable by everyone, including people with disabilities.

9- Seek Feedback: Share your work with others, whether it's friends, mentors, or online coding communities. Constructive feedback can help you identify areas for improvement and gain valuable insights.

10- Patience and Persistence:Learning frontend development can be challenging, but don't get discouraged. Be patient with yourself and persist through difficult tasks. Every challenge you overcome will make you a better developer.

11- Learn with Passion and Fun: Approach frontend development with passion and enthusiasm. Let your curiosity and love for coding drive your learning journey, making every milestone a joyful and rewarding experience.

12- Learn the Why, Not Just the How: Instead of merely following step-by-step tutorials, try to understand why certain code or techniques are used. Understanding the reasons behind specific decisions will help you apply them effectively in different scenarios.

13- Ask Questions and Seek Answers: Whenever you encounter a concept you don't fully understand, ask questions. Engage in coding forums, participate in discussions, and seek explanations from experienced developers. Learning from others' experiences can be invaluable.

14- Create Projects from Scratch: Rather than relying solely on frameworks and libraries, challenge yourself to build projects from scratch. This hands-on experience will deepen your understanding of core concepts.

15- Read Documentation and Source Code: Get comfortable with reading documentation and exploring source code. Understanding how established libraries and frameworks are built will provide insights into best practices and coding patterns.

16- Explain Concepts to Others: Teach what you learn to someone else. Explaining concepts in your own words not only reinforces your understanding but also helps you identify areas where you might need further clarification.

17- Stay Curious and Open-Minded: Embrace a growth mindset and stay curious about new technologies and approaches. Frontend development is constantly evolving, so being open to learning new things is essential.

18- Collaborate and Network: Connect with other developers, attend meetups, and engage in coding communities. Collaborating with peers and mentors can provide support and open doors to new opportunities.

19- Document Your Learning: Keep a coding journal or blog where you document your learning journey. Writing about your experiences and the things you've learned will reinforce your understanding and help others in the community.

20- Celebrate Progress and Learning: Celebrate your achievements and progress in understanding frontend development concepts. Each step forward, no matter how small, brings you closer to becoming a well-rounded developer.