Pull to refresh
369.82

Website development *

Making the Web Better

Show first
Rating limit
Level of difficulty

React Custom Hook: useTimeout

Level of difficulty Medium
Reading time 2 min
Views 1.3K

One of the significant advantages of this custom hook is that it ensures the callback function remains up to date even if it changes during component re-renders. By using a useRef to store the callback reference, the hook guarantees that the latest version of the function is always called.

Read more
Total votes 4: ↑2 and ↓2 0
Comments 1

React Custom Hook: useStorage

Level of difficulty Medium
Reading time 3 min
Views 1.7K

One of the key advantages of this custom hook is its simplicity. You can use it to store any type of data, such as strings, numbers, or even complex objects, with just a few lines of code. Additionally, useStorage handles the serialization and deserialization of data for you, so you don't have to worry about converting values to and from JSON.

Read more
Total votes 3: ↑2 and ↓1 +1
Comments 0

React Custom Hook: useStateWithValidation

Level of difficulty Medium
Reading time 2 min
Views 1.3K

One of the key advantages of this custom hook is its flexibility. You can pass any validation function that suits your specific requirements. Whether it's checking the length of a string, ensuring a numeric value falls within a certain range, or performing more complex validations, useStateWithValidation has got you covered.

Read more
Total votes 3: ↑2 and ↓1 +1
Comments 0

React Custom Hook: useStateWithHistory

Level of difficulty Medium
Reading time 3 min
Views 1.4K

In this article series, we embark on a journey through the realm of custom React hooks, discovering their immense potential for elevating your development projects. Our focus today is on the "useStateWithHistory" hook, one of the many carefully crafted hooks available in the collection of React custom hooks.

Read more
Total votes 1: ↑0 and ↓1 -1
Comments 1

React + Three.js. Creating your own 3D shooter. Part 1

Level of difficulty Medium
Reading time 30 min
Views 3.8K

Hello, dear users of the IT world!

In the era of active development of web technologies and interactive applications, 3D-graphics is becoming more and more relevant and in demand. But how to create a 3D application without losing the advantages of web development? In this article, we will look at how to combine the power of Three.js with the flexibility of React to create your own game right in the browser.

This article will introduce you to the React Three Fiber library and teach you how to create interactive 3D games.

Read more
Total votes 4: ↑3 and ↓1 +2
Comments 0

React Custom Hook: useScript

Level of difficulty Medium
Reading time 2 min
Views 2.1K

useScript can be used in various scenarios. For instance, you can load external libraries like jQuery, enabling you to harness its powerful functionalities without adding bulk to your bundle. Additionally, you can load analytics scripts, social media widgets, or any other script necessary for your application's dynamic behavior.

Read more
Total votes 4: ↑3 and ↓1 +2
Comments 1

React Custom Hook: useRenderCount

Level of difficulty Medium
Reading time 2 min
Views 1.2K

One of the major advantages of using useRenderCount is its simplicity. By abstracting the logic into a reusable hook, you can easily integrate it into any component without cluttering your codebase. Additionally, it provides a clear and concise way to monitor render behavior, which can be crucial for performance optimization and debugging.

Read more
Total votes 3: ↑2 and ↓1 +1
Comments 0

React Custom Hook: usePrevious

Level of difficulty Medium
Reading time 2 min
Views 2.4K

This custom hook can be a game-changer in various scenarios. For instance, you can utilize usePrevious to compare and visualize changes in data, track state transitions, or implement undo/redo functionality. Additionally, it can be valuable in form handling, animations, and any situation where having access to the previous value is crucial for your application's logic.

Read more
Total votes 3: ↑2 and ↓1 +1
Comments 0

Creating a mini-game with drip effect and moving circles. Part 2. Final

Level of difficulty Easy
Reading time 8 min
Views 516

Hello, dear users of the IT world!

In modern web development there are many ways to make your website interesting and attractive to users. And even using simple techniques you can achieve great results!

I suggest you to create a mini-game from scratch yourself. And then, you can use it to liven up and add interactivity to any web page.

Read more
Rating 0
Comments 0

React Custom Hook: useOnScreen

Level of difficulty Medium
Reading time 2 min
Views 2.5K

One of the key advantages of useOnScreen is its simplicity. With just a few lines of code, you can detect if an element is visible and respond accordingly. This can be immensely useful in scenarios where you want to trigger animations, lazy load images, or load additional content as the user scrolls.

Read more
Total votes 3: ↑2 and ↓1 +1
Comments 2

Creating a mini-game with a drip effect and moving circles. Part 1

Level of difficulty Easy
Reading time 7 min
Views 600

Hello, dear users of the IT world!

In modern web development there are many ways to make your website interesting and attractive to users. And even using simple techniques you can achieve great results!

I suggest you to create a mini-game from scratch yourself. And then, you can use it to liven up and add interactivity to any web page.

Read more
Total votes 3: ↑3 and ↓0 +3
Comments 0

React Custom Hook: useOnlineStatus

Level of difficulty Medium
Reading time 2 min
Views 1.5K

One of the main advantages of "useOnlineStatus" is its simplicity. By importing and using this hook in your component, you can effortlessly access the online status of the user. The hook internally uses the "navigator.onLine" property to determine the initial online status and dynamically updates it whenever the user's connectivity changes.

Read more
Rating 0
Comments 0

React Custom Hook: useMediaQuery

Level of difficulty Medium
Reading time 2 min
Views 1.5K

One of the key advantages of this custom hook is its simplicity and reusability. With just a few lines of code, you can effortlessly implement responsive behavior throughout your application. Whether you need to conditionally render components, apply specific styles, or trigger different functionality based on screen size, useMediaQuery has got you covered.

Read more
Total votes 3: ↑2 and ↓1 +1
Comments 0

React Custom Hook: useLongPress

Level of difficulty Medium
Reading time 2 min
Views 1.2K

One of the key advantages of useLongPress is its simplicity. By utilizing this hook, developers can easily define a long-press action on any element in their React application. With just a few lines of code, the hook takes care of handling the intricacies of tracking the long-press duration and triggering the associated callback function.

Read more
Total votes 3: ↑2 and ↓1 +1
Comments 0

React Custom Hook: useGeolocation

Level of difficulty Medium
Reading time 2 min
Views 1.8K

One of the key advantages of useGeolocation is its simplicity. By encapsulating the complex logic required for geolocation access and handling, this hook provides a clean and reusable solution. The hook automatically handles the loading state, updating it when geolocation data is being fetched, and sets the error state if any issues arise during the process.

Read more
Total votes 3: ↑2 and ↓1 +1
Comments 0

React Custom Hook: useFetch

Level of difficulty Medium
Reading time 2 min
Views 2.4K

One of the key advantages of useFetch is its simplicity. By abstracting away the fetch logic into a reusable hook, developers can quickly and effortlessly make HTTP requests and handle responses without repetitive boilerplate code. With just a few lines, useFetch handles the network request, parses the JSON response, and provides the resulting data.

Read more
Total votes 3: ↑0 and ↓3 -3
Comments 0

React Custom Hook: useEventListener

Level of difficulty Medium
Reading time 2 min
Views 1.4K

The useEventListener hook is a versatile tool that can be used in a wide range of scenarios. Whether you need to capture keyboard events, listen for scroll events, or interact with user input, this hook has got you covered. Its simplicity and elegance make it an ideal choice for any React project, from small-scale applications to large-scale enterprise solutions.

Read more
Rating 0
Comments 0

Let's kill all frameworks at once

Level of difficulty Medium
Reading time 14 min
Views 5.8K

The general trend of technology development is characterized by surges and declines. Consider, for instance, the mass movement of human bodies. Initially, horses and wagons were used, which gradually evolved into a distinct industry. Then trains appeared abruptly. Horses were quickly forgotten, and the focus shifted to a new avenue. Steam became an object of study and evolved into a complex science. Diesel and electricity developed concurrently. At a certain point, steam engines became obsolete, and everyone transitioned to diesel and electricity. Similarly, we are now transitioning to electric cars that require significantly fewer fluids.

Technologies evolve and function until new technologies completely replace them. I believe we are entering an era where framework and Electron technologies may be eclipsed by generative AI. Let's examine some examples.

Read more
Rating 0
Comments 8

React Custom Hook: useDeepCompareEffect

Level of difficulty Medium
Reading time 3 min
Views 1.7K

One of the key advantages of useDeepCompareEffect is its ability to prevent unnecessary re-renders. By performing a deep comparison between the current and previous dependencies, the hook intelligently determines if the effect should be triggered, leading to optimized performance in scenarios where shallow comparisons fall short.

Read more
Rating 0
Comments 0

React Custom Hook: useDebugInformation

Level of difficulty Medium
Reading time 3 min
Views 2K

The useDebugInformation hook can be applied in various scenarios. For instance, imagine you're working on a complex form component where certain props trigger updates or affect rendering. By utilizing useDebugInformation, you can easily monitor how these props impact your component's performance and whether unnecessary re-renders are occurring. Additionally, the hook can be invaluable when investigating why a specific component is not updating as expected or when fine-tuning optimizations in a performance-critical application.

Read more
Total votes 4: ↑3 and ↓1 +2
Comments 0

Authors' contribution