The useEffect clean-up callback executes on every render

Most people think it executes only when the component unmounts, but that’s not true.

On every render, the clean-up callback from the previous render executes just before the next effect execution.

Let’s see an example:

function SomeComponent() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    console.log('The current count is ', count)
    return () => {
      console.log('The previous count is ', count)
    }
  })

  return <button onClick={() => setCount(count + 1)}>Click me</button>
}

This logs the following:

// Component mounts
The current count is 0

// Click
The previous count is 0
The current count is 1

// Click
The previous count is 1
The current count is 2

// Component unmounts
The previous count is 2

🚀 Why This Matters?

This behavior is essential for managing subscriptions, event listeners, and cleanup logic effectively.

Adding a dependency array ensures the effect runs only when needed

🔟 unique web development project ideas for freshers

1. Freelance Client Management System:
Build a system for freelancers to track client details, project timelines, invoices, and payments. Incorporate features like task lists, payment reminders, and time tracking. You’ll get hands-on experience with CRUD operations and secure user authentication.

2. Nonprofit Donation Platform:
Develop a platform for nonprofit organizations where users can donate to causes. You can include a donation tracker, goal setting, and integration with payment gateways like Stripe or PayPal. This will involve front-end design and server-side payment processing.

3. Interactive Educational Platform for Kids:
Create a platform where kids can learn basic subjects like math, spelling, or coding through fun, interactive games. Add features like badges, scoreboards, and quizzes to keep them engaged. This will give you experience in animations, gamification, and user experience design.

4. Real Estate Listings Website:
Build a platform where agents or homeowners can list properties for rent or sale. Include features like advanced search, map integration, and filters for property type, price, and location. You’ll get exposure to working with APIs and map services like Google Maps.

5. Virtual Art Gallery:
Design a virtual space where artists can display their work. Use animations to simulate a walk-through gallery, allowing users to explore and click on individual pieces for more details. You’ll explore 3D rendering, animations, and responsive design in this project.

6. Job Application Tracker:
Help job seekers keep track of job applications by building a dashboard that organizes companies, positions, interview stages, and deadlines. This app could send automated reminders for follow-ups, giving you experience with notifications and task scheduling.

7. Music Streaming Player:
Develop a personalized music player where users can create and share playlists. Integrate it with a music API like Spotify or Apple Music to pull in tracks. This project will introduce you to audio streaming, user authentication, and data storage for playlists.

8. Mental Health Tracker:
Create a web app where users can log daily moods, set mental health goals, and track progress over time. Incorporate features like journaling, breathing exercises, and visual data charts. This would involve data collection, chart visualization, and user interface design.

9. Sustainable Shopping Guide:
Build a platform where users can discover eco-friendly products and businesses. You can integrate a rating system for users to rate brands on sustainability practices. The project will teach you about APIs, user-generated content, and social proof.

10. Virtual Study Group App:
Create an app where students can join or form virtual study groups, chat in real-time, and share resources like notes and flashcards. You can add video integration or virtual whiteboards to make the platform more collaborative. This project will help you understand real-time data transfer, group authentication, and video/chat APIs.

Web Development Best Resources: https://topmate.io/coding/930165

ENJOY LEARNING 👍👍

24 Youtube Channels for Web Developers

✅ Academind
✅ Clever Programmer
✅ Codecourse
✅ Coder Coder
✅ DevTips
✅ DerekBanas
✅ Fireship
✅ FreeCodeCamp
✅ FlorinPop
✅ Google Developers
✅ Joseph Smith
✅ KevinPowell
✅ LearnCode academy
✅ LearnWebCode
✅ LevelUpTuts
✅ Netanel Peles
✅ Programming with Mosh
✅ SteveGriffith
✅ TheNetNinja
✅ TheNewBoston
✅ TraversyMedia
✅ Treehouse
✅ WebDevSimplified
✅ Codewithharry

Forget Midjourney, It costs $8/M to use.

Here are 5 alternatives to you use

1. Bing Image Creator :

Simply type your ideas into Bing which will create one-of-a-kind images from text.

Platforms: Web, Android, iOS

2. Lexica

It acts as a search engine for Stable Diffusion-generated images.

Features:

- Generate 100 images per month for free.

- Effortless to use

Platform: Web

3. Stable Diffusion

It is a free and open-source model.

- Powerful capabilities

- Trained on large dataset

Platforms: Web

4. Adobe Firefly

- In-house text-to-image model by Adobe.

- Has promising features like image expansion and sketch-to-image.

- 💯 Free

Platforms: Web

5. Playground AI

- Generate 1000 images per day for free.

- Stable Diffusion and DALL·E are available.

Platforms: Web

Join for more: https://t.iss.one/AI_Best_Tools

ENJOY LEARNING 👍👍

5 beginner-friendly web development projects that can help you improve your skills

1. Personal Website or Portfolio:
   - Create a website that showcases your resume, projects, and skills.
   - Practice HTML and CSS to design the layout and style it.

2. To-Do List Application:
   - Build a simple to-do list app using HTML, CSS, and JavaScript.
   - Learn about DOM manipulation, event handling, and local storage.

3. Weather App:
   - Develop a web app that fetches and displays weather information for a user's location.
   - Use HTML, CSS, JavaScript, and APIs like OpenWeatherMap.

4. Blog or Blogging Platform:
   - Create a basic blog or expand it into a blogging platform.
   - Learn about databases (e.g., SQLite), server-side scripting (e.g., Node.js), and user authentication.

5. E-commerce Product Page:
   - Design a product page for an e-commerce site.
   - Practice building product grids, adding product details, and implementing a shopping cart feature.

These projects cover a range of web development skills, from front-end design to back-end development. As you work on them, you'll gain experience and confidence in web development.