React: How do you lazyload image from API response?

My website is too heavy because it downloads 200-400 images after fetching data from the server (Google’s Firebase Firestore). I came up with two solutions and I hope somebody answers one of them: I want to set each img to have a loading state and enable visitors to see the placeholder image until it is loaded. As I don’t know how many images I get until fetching data from the server, I find it hard to initialize image loading statuses by useState. Is this possible? Then, how? How can I Lazy load images? Images are initialized with a placeholder. When

How to use React with function component and hooks ONLY?

Having a React project with some component written in Class style and some others written in Hooks styles make the newcomers confuse and harder to reuse common logic. Is there a way, for example: An …

Context API problem – object is undefined

I’ve been always using Redux, but I finally decided to try to play with Context API, but apparently I’m missing something. I get an error “TypeError: Object(…)(…) is undefined” in App.js, weather and details appear to be undefined. Could you please check out my code in order to help me out in finding a mistake? I thought I should have a direct access to the state without the need of destructuring. Or maybe destructuring is the only way to go? Here you can see all parts of my code – context + wrapped app.js. MyContext.js App.js Everything is wrapped in

How to prevent useCallback from triggering when using with useEffect (and comply with eslint-plugin-react-hooks)?

I have a use-case where a page have to call the same fetch function on first render and on button click. The code is similar to the below (ref: https://stackblitz.com/edit/stackoverflow-question-bink-…

react redux useSelector rerender even when data does not change

I am using react with redux and redux thunk. I have an action where I am making a network request. With the useSelector I am getting the data from redux store. I have a problem that the component …

react save possibility to select text with re-render component

i have component with text. It changed component own state with mouse click. But i want to save possibility to select and copy in by long click. Is there way to make it ? Selection is reset after rerender component. Code for example: Answer How about using onMouseDown and onMouseUp events yourself and calculate the time the user took to click instead of using onClick? You could for example do something like this: You can find a quick codesandbox as a demo here

My program is ‘skipping’ a fetch request, React.js

Its really weird. The first fetch I do works appropriately, but when doing the second fetch in my handleSubmit() method it sort of ‘skips’ it. It goes on, never enters the .then statements, doesn’t …

Why is useState not triggering re-render?

I’ve initialized a state that is an array, and when I update it my component does not re-render. Here is a minimal proof-of-concept: function App() { const [numbers, setNumbers] = React.useState([0, …

useMemo vs. useEffect + useState

Are there any benefits in using useMemo (e.g. for an intensive function call) instead of using a combination of useEffect and useState? Here are two custom hooks that work exactly the same on first …

React Using useState/Hooks In HOC Causes Error “Hooks can only be called inside of the body of a function component”

Is it not allowed to use hooks inside of a Higher Order Component? When I try to do it with this simple pattern I’m getting the error Invalid hook call. Hooks can only be called inside of the body of a function component. Answer I believe you should use the hooks inside the HOC: