i recently started using react and i'm trying to write a custom hook used for translating some ui elements. I'm not using a library because it is a larger proje
I often wrote functional components following a 'Class architecture' where all my function that concern the component are written inside of it like a method in
I'm building a react Amazon clone, so in order to give the user the ability to add a product into his basket (as the first version of all the future checkout sy
I tried to make a badge icon with red text, but all the styles I applied to the Text didn't work at all IconWithBade.js import React from 'react'; import {Style
I'm new to react and have just added some regex validation to a jsx file in an existing react project (created about 4 months ago) . After building a new bundle
I am new to React and TypeScript. I want to toggle a boolean state (true/false) with a handler function. I've read other posts about how to do this in ES6 but
I'm trying pagination by useInfiniteQuery in React Query, it's refetch data perfectly, but there's a problem that each time new data added, the page re-render a
Many of you might have heard of GraphQL. It provides QUERY and MUTATION. Also it supports SUBSCRIPTION as 100% replacement of web socket. I'm a big fan of Graph
I always forget to add empty dependencies array in my useEffect hook in React to run the effect only once. That's why I decided to use a custom hook with a clea
If I want to call API after the first rendering of component, I know we have useEffect hook to call the API method. (I am talking about functional components on
Using React's useCallback hook is essentially just a wrapper around useMemo specialized for functions to avoid constantly creating new function instances within
How can we identify props changes in functional component?. Sample code here. Can you please help me to convert this componentDidUpdate method to functional com
I have a weird bug that I'm trying to solve, sandbox here: https://codesandbox.io/s/drag-and-drop-with-reordering-test-i9f0j3 Basically, the reordering doesn't
Here is my custom hook: export function useClientRect() { const [scrollH, setScrollH] = useState(0); const [clientH, setClientH] = useState(0); c
Like the title says, the localStorage I set registers the changes made to the todoList array and JSON.stringifys it; however, whenever I refresh the page the ar
I have two basic questions about React: In order to assign an initial empty value to a piece of state (let's say player) in a functional component, are the foll
I have the following problem. In widgetFilters array (length===3) i want to show the numbers of selected items in the header of the Filter. const [selectedFil
Currently in my project I have a folder with all my svg files, the query to get them from graphql is as follows: query AssetsPhotos { allFile(filter: {extensi
I'm using Enzyme's shallow method to test a component which uses the useParams hook to get an ID from the URL params. I'm trying to mock the useParams hook so
I'm running a React Native project where I'm testing custom hooks written with react-query. I'm using Jest, @testing-library/react-hooks and @testing-library/re