habr·3yReact Custom Hook: useArray
"useArray" hook is one of the many carefully crafted hooks available in the collection of React custom hooks. The useArray hook uses the useState hook from React to manage the array state. The advantages of using this custom hook are twofold: it simplifies the management of array states and provides a cleaner and more readable code structure.
habr·3yReact + Three.js. Creating your own 3D shooter. Part 1
This article explores the integration and features of React Three Fiber, a library that combines React and Three.js for creating 3D graphics on the web. It discusses the advantages of using React Three Fiber, the relevance of web game development, and performance aspects to consider. The article provides a step-by-step guide on setting up the project, customizing the Canvas display, adding a floor surface, lighting, physics, camera movement, importing 3D models, enabling shadows, and adding animation. The next part of the article will cover further improvements to the game.
habr·3ySupercharge Your Projects with React Custom Hooks
React Hooks are a feature introduced in React version 16.8 that revolutionized the way developers write and manage stateful logic in functional components. They enable developers to break down complex components into smaller, more manageable pieces, resulting in cleaner and more maintainable code. Hooks allow developers to manage component state and handle side effects effortlessly.
habr·3yReact Custom Hook: useAsync
The useAsync hook takes in a callback function that performs the asynchronous operation and an optional array of dependencies. It returns an object with three properties: loading, error, and value. The hook employs the useState and useEffect hooks to manage the loading state and invoke the memoized callback function when necessary.
habr·3yReact Custom Hook: useOnScreen
The useOnScreen hook leverages the power of the Intersection Observer API. It can be immensely useful in scenarios where you want to trigger animations, lazy load images, or load additional content as the user scrolls. UseOnScreen will notify you when it enters or exits the viewport.
habr·3yChatGPT to Help You Become a 10x Programmer
ChatGPT to Help You Become a 10x Programmer. I believe that every programmer has at least once heard about ChatGPT and its marvelous abilities to process, calculate and create huge amounts of data. If you don't know how to write an IP changer using Python, you simply query the AI and it generetes pretty good code.
habr·3yReact Custom Hook: useDarkMode
"UseDarkMode" Hook is one of the many carefully crafted hooks available in the collection of React custom hooks. It combines two other handy hooks and, to provide a seamless dark mode experience. It automatically detects the user's preferred color scheme and persists the dark mode state in the browser's local storage.
habr·3yReact Custom Hook: usePrevious
"usePrevious" hook is one of the many carefully crafted hooks available in the collection of React custom hooks. The advantages of using usePrevious are remarkable. By using useRef, this hook efficiently stores the current and previous values, updating them whenever the value changes.
habr·3yReact Custom Hook: useStorage
Discover the potential of React custom hooks with a focus on the 'useStorage' hook. It provides convenient functions for storing and retrieving data in the browser's local or session storage. The hook handles serialization, deserialization, and automatic synchronization with the component's state. The remove function allows for easy deletion of stored values. Use the hook in various scenarios, such as persisting user preferences in a settings panel.
habr·3yReact Custom Hook: useClickOutside
The useClickOutside hook is designed to simplify the process of detecting clicks outside a specified component. It listens for click events on the document level, allowing you to trigger a callback function when a click occurs outside the provided component's reference. It works seamlessly with functional components using the useState and useRef hooks.
habr·3yReact Custom Hook: useDebugInformation
React Custom Hook: useDebugInformation is one of the many carefully crafted hooks available in the collection of React custom hooks. The hook tracks the number of renders, changed props, time since the last render, and the timestamp of the last rendering. UseDebugInformation can be applied in various scenarios.
habr·3yLet's kill all frameworks at once
The general trend of technology development is characterized by surges and declines, says John Sutter. Sutter: We are entering an era where framework and Electron technologies may be eclipsed by generative AI. He says.NET is becoming an open platform with all source code available on GitHub.NET.
habr·3yReact Custom Hook: useCookie
React Custom Hook: useCookie is one of the many carefully crafted hooks available in the collection of React custom hooks. UseCookie allows you to effortlessly handle cookies by providing a concise interface. In scenarios where you need to remove a cookie, the deleteCookie function comes to the rescue.
habr·3yReact Custom Hook: useTimeout
Learn about the useTimeout hook in React, which allows for easy setting, clearing, and resetting of timeouts within a component. The hook ensures that the callback function remains up to date and optimizes performance by memoizing certain functions. It can be used in various scenarios where timed actions are required.
habr·3yReact Custom Hook: useRenderCount
The "useRenderCount" hook is one of the many carefully crafted hooks available in the collection of React custom hooks. The hook uses React's useEffect and useRef hooks to keep a count of renders. With each render, the count is incremented, providing you with real-time feedback on the component's render frequency.
habr·3yReact Custom Hook: useMediaQuery
The useMediaQuery hook allows you to dynamically update your UI based on a given media query. The hook is not limited to specific use cases; it can be used in a variety of scenarios. For instance, you can use it to dynamically adjust the layout of a navigation menu, hide or show certain elements based on screen size.
habr·3yReact Custom Hook: useOnlineStatus
"useOnlineStatus" hook is one of the many carefully crafted hooks available in the collection of React custom hooks. The hook internally uses the "navigator.onLine" property to determine the initial online status and dynamically updates it whenever the user's connectivity changes.
habr·3yReact — Higher Order Components (HOC)
Learn about Higher Order Components (HOCs) in React and how they enhance code reusability, separation of concerns, code modularity, and unit testing. Discover their practical application in handling authentication and adding additional functionalities to components. Explore the nesting and manipulation of HOCs for more flexibility and power in building React applications.
habr·3yReact Custom Hook: useGeolocation
The useGeolocation hook uses React's useState and useEffect hooks to manage the state of loading, errors, and geolocation data. The hook automatically handles the loading state, updating it when geolocated data is being fetched, and sets the error state if any issues arise during the process.
habr·3yReact Custom Hook: useFetch
React Custom Hook: useFetch is one of the many carefully crafted hooks available in the collection of React custom hooks. UseFetch handles the network request, parses the JSON response, and provides the resulting data. The hook also offers flexibility through its customizable options parameter.
habr·3yReact Custom Hook: useDebounce
The useDebounce hook leverages the useTimeout hook internally to delay the execution of a callback function until a specified delay has passed. The hook takes care of managing the timeout and clears it when necessary, ensuring that the callback is only triggered after the specified delay and with the latest dependencies.