[{"_1":2,"_272":-5,"_273":-5},"loaderData",{"_3":4,"_250":251,"_267":268},"root",{"_5":6,"_7":8,"_15":-5,"_16":17,"_199":200,"_220":221,"_222":-5,"_223":224,"_237":-5,"_238":239},"isDev",false,"honeypotInputProps",{"_9":10,"_11":12,"_13":14},"nameFieldName","name__confirm","validFromFieldName","from__confirm","encryptedValidFrom","nq6gBzqJXP8dU4Q+KpLTtEoCB+YWkgqqRJou3ykrRxlLCfk1B04xp3Q=","toastItem","latestArticles",{"_18":19,"_37":140},"articles",{"_18":20,"_130":131},[21,77,100],{"_22":23,"_24":25,"_26":27,"_28":29,"_30":31,"_32":33,"_34":35,"_36":-5,"_37":38,"_48":49,"_53":54,"_57":58,"_55":56,"_67":68},"published",true,"id","cmayadxmp0004pu2e6tic9ost","title","Quel ordinateur choisir pour coder en 2025 ?","slug","quel-ordinateur-choisir-pour-coder-en-2025-guide-complet-pour-debutants-en-developpement-web","description","Choisir le bon ordinateur est une étape essentielle quand on débute en développement web. Pas besoin d’un matériel ultra-performant, mais il faut un équipement fiable et adapté à vos besoins pour coder efficacement et progresser sans frustration. Dans cet article, je vous aide à choisir l’ordinateur idéal, que vous soyez étudiant, débutant ou en reconversion.","datePublished",["D",1747785600000],"content","## 1. PC, Mac ou Linux : quel système choisir ?\n\n* **PC Windows** : très répandu, souvent moins cher, compatible avec la majorité des logiciels et outils de développement. Idéal pour débuter avec un bon rapport qualité-prix.\n* **Mac** : apprécié des développeurs pour sa stabilité et son environnement Unix natif, pratique pour coder. Plus cher, mais souvent recommandé pour certains types de développement (iOS, macOS).\n* **Linux** : système open-source, très apprécié des développeurs avancés. Moins courant pour les débutants car nécessite un peu plus d’apprentissage.\n\nSi vous débutez, un PC Windows ou un Mac récent suffira largement.\n\n## 2. Les caractéristiques techniques importantes\n\nPour coder confortablement, certaines caractéristiques matérielles sont essentielles :\n\n* **Processeur (CPU)** : privilégiez au minimum un Intel i5 ou équivalent AMD Ryzen 5. Un processeur plus puissant accélère les compilations et exécutions.\n* **Mémoire RAM** : 8 Go est le minimum recommandé. Pour travailler sur plusieurs projets ou machines virtuelles, 16 Go est idéal.\n* **Stockage** : un disque SSD (256 Go ou plus) est essentiel pour la rapidité du système et des logiciels. Évitez les disques durs mécaniques lents.\n* **Écran** : un écran de 14 à 15 pouces avec une bonne résolution (Full HD minimum) est confortable pour coder plusieurs heures. Pour plus de confort, un deuxième écran peut être ajouté.\n* **Clavier et autonomie** : un clavier agréable et une bonne autonomie (au moins 6 heures) sont importants si vous travaillez souvent en déplacement.\n\n## 3. Ordinateurs recommandés pour débuter en développement web\n\nVoici quelques modèles adaptés selon votre budget :\n\n* **Entrée de gamme (moins de 700 €)** : Lenovo IdeaPad, Acer Aspire avec i5, 8 Go RAM, SSD 256 Go.\n* **Milieu de gamme (700–1200 €)** : Dell Inspiron, HP Pavilion, MacBook Air M1 (modèle 2020) pour un bon compromis performance/portabilité.\n* **Haut de gamme (plus de 1200 €)** : MacBook Pro, Dell XPS, Razer Blade, pour les développeurs qui souhaitent investir dans un matériel durable et puissant.\n\n## 4. Pourquoi ne pas prendre un ordinateur trop puissant au départ ?\n\nPour un débutant, investir dans un ordinateur très cher n’est pas toujours nécessaire. L’essentiel est d’avoir une machine fiable qui tourne bien avec les outils de base (VS Code, navigateurs, terminal). Vous pourrez toujours upgrader ou changer plus tard selon vos besoins.\n\n## 5. Accessoires utiles pour coder confortablement\n\n* **Souris ergonomique** : pour éviter les douleurs au poignet.\n* **Support ordinateur portable** : pour une meilleure posture.\n* **Disque dur externe ou clé USB** : pour sauvegarder vos projets.\n* **Casque audio** : idéal pour se concentrer en environnement bruyant.\n\n## Conclusion : faites un choix adapté à vos besoins et à votre budget\n\nChoisir un ordinateur pour coder ne doit pas être un casse-tête. Commencez par un PC ou Mac avec au moins 8 Go de RAM, un processeur i5 ou Ryzen 5, et un SSD rapide. Pensez aussi au confort d’utilisation avec un bon écran et clavier.\n\nPour aller plus loin, retrouvez mes conseils en vidéo sur ma chaîne YouTube[ Virgile Rietsch](https://www.youtube.com/@Virgile-Rietsch) et découvrez mes ressources sur[ Algomax.fr](https://algomax.fr/).","youtubeVideo","categories",[39,42,45],{"_24":40,"_26":41},"cma0ygz000008yk67urmvvgxl","Docker",{"_24":43,"_26":44},"cma0ygyuu0003yk679pggj8v0","NestJS",{"_24":46,"_26":47},"cma0ygyss0001yk67s6tvyf8q","ReactJS","author",{"_24":50,"_51":52},"cma0ygz43000byk6730758t6t","name","Algomax","_count",{"_55":56},"views",95,"readTime",{"_59":60,"_61":62,"_63":64,"_65":66},"text","3 min read","minutes",2.57,"time",154200,"words",514,"featuredImage",{"_69":70,"_71":72,"_73":74,"_75":76},"url","https://algomax-public.s3.eu-west-3.amazonaws.com/45d6e322-e186-4d34-b5ea-c3df39ae91bd.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVPNRXAVVQGI3HZAS%2F20260202%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20260202T210755Z&X-Amz-Expires=3600&X-Amz-Signature=83626c8851fc95667aaa558e12e920777b1e404ca41af9e8afa4790fd740cf1d&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","alt","Quel ordinateur choisir pour coder en 2025 ? Guide complet pour débutants en développement web","width",1200,"height",675,{"_22":23,"_24":78,"_26":79,"_28":80,"_30":81,"_32":82,"_34":83,"_36":-5,"_37":84,"_48":88,"_53":89,"_57":91,"_55":90,"_67":96},"cmaya7b3k0003pu2ew8l9fghm","Comment devenir développeur web : le guide complet pour bien démarrer en 2025","comment-devenir-developpeur-web-:-le-guide-complet-pour-bien-demarrer-en-2025","Découvrez comment devenir développeur web facilement en 2025 grâce à ce guide complet. Matériel, formations, technologies clés, conseils pratiques et astuces pour débuter et réussir dans le développement web.",["D",1747785600000],"## 1. Le matériel et les équipements indispensables pour coder efficacement\n\nPour bien débuter en développement web, un matériel adapté est essentiel. Pas besoin d’ordinateur très puissant, mais certaines caractéristiques facilitent le travail :\n\n* **Un ordinateur avec au moins 8 Go de RAM**, capable de faire tourner un éditeur de code (Visual Studio Code), un navigateur web, et d’autres outils simultanément.\n* **Une connexion internet stable** pour accéder aux ressources en ligne, suivre des tutoriels et tester vos projets sur le web.\n* **Un éditeur de code gratuit et performant**, comme Visual Studio Code, qui offre de nombreuses extensions pour les débutants et les professionnels.\n* **Un navigateur moderne** (Chrome, Firefox, Edge) équipé d’outils de développement pour tester et déboguer vos sites.\n\nPour plus d’informations sur le matériel, consultez notre article détaillé [Quel ordinateur choisir pour coder ?.](https://algomax.fr/blog/quel-ordinateur-choisir-pour-coder-en-2025-guide-complet-pour-debutants-en-developpement-web \"Ordinateur débutant\")\n\n## 2. Les meilleures formations pour apprendre le développement web en 2025\n\nLe développement web peut s’apprendre de plusieurs façons :\n\n* **Formations gratuites en ligne** : plateformes comme FreeCodeCamp, OpenClassrooms ou Codecademy proposent des cours complets pour maîtriser HTML, CSS et JavaScript, sans dépenser un centime.\n* **Formations diplômantes et bootcamps intensifs** : pour ceux qui veulent un apprentissage encadré, des diplômes comme le BTS Services Informatiques ou des bootcamps (Le Wagon, Ironhack) sont de bonnes options pour entrer rapidement sur le marché du travail.\n* **Auto-apprentissage et ressources complémentaires** : ma chaîne YouTube Algomax vous propose des tutoriels pas à pas pour progresser à votre rythme.\n\nN’hésitez pas à combiner plusieurs ressources pour un apprentissage efficace.\n\n## 3. Les technologies incontournables pour débuter en développement web\n\nPour bien débuter, il est important de maîtriser ces technologies de base :\n\n* **HTML** : structure de base des pages web.\n* **CSS** : styles et mise en forme.\n* **JavaScript** : interactivité et dynamisme.\n* **Git et GitHub** : gestion de version et collaboration.\n\nUne fois ces bases acquises, explorez les frameworks modernes comme **React** pour le front-end ou **Node.js** pour le back-end, très demandés par les recruteurs.\n\n## 4. Comment se lancer concrètement : conseils pratiques pour débutants\n\n* **Réalisez vos premiers projets** : créez un portfolio en ligne, un site vitrine, ou une petite application web pour mettre en pratique vos connaissances.\n* **Pratiquez tous les jours** : même 30 minutes par jour peuvent faire une grande différence. La régularité est clé pour progresser rapidement.\n* **Rejoignez des communautés en ligne** : forums, groupes Facebook, serveurs Discord dédiés au développement web sont d’excellents moyens d’échanger et de trouver du soutien.\n* **Cherchez des expériences professionnelles** : stages, missions freelance, ou contributions open source renforceront votre CV et votre expérience.\n\n## 5. Surmonter les difficultés du développement web : astuces et motivation\n\nLe chemin vers le métier de développeur web comporte des obstacles :\n\n* **Comprendre les concepts complexes** : fonctions, objets, API peuvent sembler difficiles, mais avec de la patience et de la pratique, ils deviennent accessibles.\n* **Faire face aux bugs** : les erreurs sont inévitables. Apprenez à utiliser les outils de débogage et à chercher des solutions sur internet.\n* **Maintenir la motivation** : fixez-vous des objectifs réalisables, suivez vos progrès et n’hésitez pas à demander de l’aide. La persévérance est la clé de la réussite.\n\n## Conclusion : lancez-vous dans le développement web dès aujourd’hui !\n\nLe développement web est un métier accessible à tous ceux qui ont la curiosité et la motivation d’apprendre. Avec le bon matériel, des formations adaptées, une pratique régulière, et une bonne dose de patience, vous pouvez rapidement devenir développeur web.\n\nPour continuer votre apprentissage, rendez-vous sur[ Algomax.fr](https://algomax.fr/), où vous trouverez des ressources, des tutoriels, et des conseils pour progresser. N’oubliez pas de vous abonner à ma chaîne YouTube[ Virgile Rietsch](https://www.youtube.com/@Virgile-Rietsch) pour suivre mes vidéos pas à pas.\n\nChaque ligne de code vous rapproche un peu plus de votre objectif : lancez-vous dès maintenant !",[85],{"_24":86,"_26":87},"cma0ygz0z0009yk67nztcrh2s","Terminal",{"_24":50,"_51":52},{"_55":90},12,{"_59":92,"_61":93,"_63":94,"_65":95},"4 min read",3.23,193800,646,{"_69":97,"_71":79,"_73":98,"_75":99},"https://algomax-public.s3.eu-west-3.amazonaws.com/2cf18040-41f4-49e2-8acb-f4657f145f38.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVPNRXAVVQGI3HZAS%2F20260202%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20260202T210755Z&X-Amz-Expires=3600&X-Amz-Signature=8b1c574c000c11945f2fe3365a4eaa1ebb67f8b9940e0be4b02b801072c07770&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject",6000,4001,{"_22":23,"_24":101,"_26":102,"_28":103,"_30":104,"_32":105,"_34":106,"_36":-5,"_37":107,"_48":115,"_53":118,"_57":120,"_55":119,"_67":125},"cma0ygz5s000dyk67f34wo2ts","Les 10 meilleurs hooks avec React Router 7 (anciennement Remix)","les-10-meilleurs-hooks-avec-react-router-7-anciennement-remix","Voici 10 hooks que j'utilise le plus dans mes applications Remix / React Router 7. ",["D",1736640000000],"Dans cet article, je partage avec vous mes **hooks** préférés pour [React Router 7](https://reactrouter.com/) (anciennement [Remix](https://remix.run)), que j’utilise dans quasiment tous mes projets.\n\n## 1. useOptionalUser\n\nC'est le hook que j'utilise le plus. Il permet de récupérer les informations optionnelles d'un utilisateur. Pour le faire fonctionner, il suffit de renvoyer un utilisateur dans le fichier `app/routes/root.tsx` (fichier racine d'une application Remix). Toute donnée chargée dans `root` est présente partout dans l'application (comme un contexte global).\n\n```tsx\nuseOptionalUser.tsx\nimport { useRouteLoaderData } from \"@remix-run/react\";\nimport type { loader } from \"app/root\";\n\nexport const useOptionalUser = () => {\n const data = useRouteLoaderData(\"root\");\n if (data?.user) {\n return data.user;\n }\n return null;\n};\n\nexport function useUser() {\n const maybeUser = useOptionalUser();\n if (!maybeUser) {\n throw new Error(\n \"No user found in root loader, but user is required by useUser. If user is optional, try useOptionalUser instead.\",\n );\n }\n return maybeUser;\n}\n```\n\nComme on utilise le type générique du hook `useRouteLoaderData`, ce hook renvoie une donnée typée. Merci Typescript !\n\n> Notez que l'on exporte également un hook `useUser` qui exploite le hook `useOptionalUser`, mais qui renvoie une erreur en cas d'utilisateur déconnecter. Cela permet de protéger les pages côté client en renvoyant une erreur en cas d'utilisateur non identifié.\n\n## 2. useTailwindScreenSizes\n\nJ'utilise ce hook pour afficher un bandeau indiquant la taille d'écran active de TailwindCSS. Ces dimensions utilises les valeurs par défaut, qu'on retrouve dans la [documentation officielle de TailwindCSS](https://tailwindcss.com/docs/responsive-design) \n\n```tsx\nuseTailwindScreenSizes\nimport React from \"react\";\n\nexport const useTailwindScreenSizes = ({\n initialWidth = 1280,\n}: {\n initialWidth?: number;\n}) => {\n const [currentWidth, setCurrentWidth] = React.useState(initialWidth);\n\n React.useEffect(() => {\n if (typeof window === \"undefined\") return;\n\n const handleScreenResize = () => {\n const width = window.innerWidth;\n setCurrentWidth(width);\n };\n handleScreenResize();\n\n window.addEventListener(\"resize\", handleScreenResize);\n return () => {\n window.removeEventListener(\"resize\", handleScreenResize);\n };\n }, []);\n\n const getResponsive = () => {\n if (currentWidth > 1536) {\n return \"2xl\";\n }\n\n if (currentWidth > 1280) {\n return \"xl\";\n }\n\n if (currentWidth > 1024) {\n return \"lg\";\n }\n\n if (currentWidth > 768) {\n return \"md\";\n }\n if (currentWidth > 640) {\n return \"sm\";\n }\n\n return \"very small\";\n };\n return { currentWidth, getResponsive };\n};\n```\n\nJ'appelle ensuite ce hook dans un composant nommé `DevTool` que je place de manière absolue. Dans le fichier `root` par exemple.\n\n```tsx\nDevtool.tsx\nimport { useIsClient } from \"hooks/useIsClient.tsx\";\nimport { useTailwindScreenSizes } from \"hooks/useTailwindScreenSizes.tsx\";\n\nconst Devtool = ({\n initialScreenWidth = 1280,\n}: {\n initialScreenWidth?: number;\n}) => {\n const { currentWidth, getResponsive } = useTailwindScreenSizes({\n initialWidth: initialScreenWidth,\n });\n\n const isClient = useIsClient();\n if (!isClient) return null;\n return (\n \n {currentWidth}\n {getResponsive()}\n \n );\n};\n\nexport default Devtool;\n```\n\n## 3. useIsClient\n\nCe hook utilise-lui même un hook nommé `useIsClient`, n'affichant rien côté serveur (on affiche ce composant côté client).\n\n```tsx\nuseIsClient.tsx\nimport { useEffect, useState } from \"react\";\n\nexport function useIsClient() {\n const [isClient, setClient] = useState(false);\n\n useEffect(() => {\n setClient(true);\n }, []);\n\n return isClient;\n}\n```\n\n## 4. useGetUserPosition\n\nAvez-vous déjà eu besoin de connaître la position géographique des utilisateurs de votre site ? On parle ici de *latitude* et *longitude*, qui permettent de calculer la distance kilométrique entre deux points. \n\nC'est notamment utile pour géolocaliser l'utilisateur et lui proposer des données locales (c'est utilisé sur [Leboncoin](https://leboncoin.fr), [Airbnb](https://airbnb.com), [Uber](https://uber.com) ... \n\nJ'ai utilisé ce hook pour la recherche d'adresse de [GoodCollect](https://goodcollect.co).\n\n```tsx\nuseGetUserPosition.tsx\nimport { useState } from \"react\";\nimport { useToast } from \"components/shadcn-ui/use-toast.ts\";\n\nexport const useGetUserPosition = ({\n successFn = () => {},\n}: {\n successFn?: ({ lat, lng }: { lat: number; lng: number }) => void;\n}) => {\n const [latLng, setLatLng] = useState<{\n loading: boolean;\n latitude: number | null;\n longitude: number | null;\n canGeoLocate: boolean;\n }>({\n loading: false,\n latitude: null,\n longitude: null,\n canGeoLocate: true,\n });\n\n const { toast } = useToast();\n\n const getUserPosition = () => {\n if (!navigator.geolocation) {\n setLatLng((oldValues) => ({\n ...oldValues,\n canGeoLocate: false,\n }));\n return;\n }\n setLatLng((oldValues) => ({ ...oldValues, loading: true }));\n\n navigator.geolocation.getCurrentPosition(\n (position) => {\n const { latitude, longitude } = position.coords;\n\n setLatLng((oldValues) => ({\n ...oldValues,\n latitude,\n longitude,\n loading: false,\n }));\n\n successFn?.({ lat: latitude, lng: longitude });\n },\n (error) => {\n if (error.PERMISSION_DENIED) {\n toast({\n description:\n \"Votre navigateur n'a pas les permissions pour vous localiser. Vous pouvez l'activer dans les paramètres de votre navigateur.\",\n variant: \"error\",\n });\n } else if (error.TIMEOUT) {\n toast({\n description:\n \"La géolocalisation a pris trop de temps. Veuillez réessayer.\",\n variant: \"error\",\n });\n } else if (error.POSITION_UNAVAILABLE) {\n toast({\n description:\n \"Votre position n'a pas pu être déterminée. Veuillez réessayer.\",\n variant: \"error\",\n });\n } else {\n toast({\n description: \"Une erreur est survenue. Veuillez réessayer.\",\n variant: \"error\",\n });\n }\n setLatLng((oldValues) => ({\n ...oldValues,\n loading: false,\n }));\n },\n {\n timeout: 10_000,\n enableHighAccuracy: true,\n maximumAge: 60_000, // 60 seconds\n },\n );\n };\n return { getUserPosition, latLng };\n};\n```\n\nCe hook renvoie les valeurs suivantes : \n\n- la latitude et longitude\n- est-ce que l'utilisateur a accepté d'être géolocalisé / est-ce qu'il peut être géolicalisé\n- est-ce que la géolocalisation est en cours (booléen *loading*)\n\nPour connaître la position, nous utilisons l'API native `navigator.geolocation.getCurrentPosition`. \n\nCe hook utilise également le hook `useToast` qui est entièrement facultatif, et qui permet d'afficher une alerte en cas d'erreur. Ce hook est fourni avec le composant [toast](https://ui.shadcn.com/docs/components/toast) de la librairie **shadcn/ui**.\n\n## 6. useFileUpload\n\nCe hook permet d'afficher un fichier chargé depuis un *input* de type `file`. Le code est à adadpté à votre cas d'utilisation. Le cas d'utilisation n'accepte que les fichiers images ou de type PDF.\nIl met à disposition plusieurs propriétés pour réinitialiser l'input, afficher le fichier et savoir si c'est une image.\n\n```tsx\nuseFileUpload.tsx\nimport React from \"react\";\n\n// Takes a file path and returns the file name and extension\nconst checkFilenameFormat = ({\n fileName,\n allowedFormats = [\"jpg\", \"jpeg\", \"png\", \"heif\", \"avif\", \"webp\", \"pdf\"],\n}: {\n fileName: string;\n allowedFormats?: string[];\n}) => {\n const fileExtension = fileName.split(\".\").pop() || \"\"; // remove the dot\n\n // Only allow image files\n const isFormatAllowed = allowedFormats.includes(fileExtension);\n const isImage = fileExtension !== \"pdf\";\n return { isImage, isFormatAllowed, fileExtension };\n};\n\nexport const useFileUpload = () => {\n const [fileUpload, setFileUpload] = React.useState(null);\n const [documentPreview, setDocumentPreview] = React.useState(\n null,\n );\n\n interface HtmlFormElement extends HTMLInputElement {\n files: FileList;\n }\n const handleFileUpload = (e: React.ChangeEvent) => {\n const [file] = e.target.files || [];\n if (file) {\n setFileUpload(file);\n } else {\n setFileUpload(null);\n }\n };\n\n const isFileImage = React.useMemo(() => {\n if (!fileUpload) return null;\n const fileFormat = checkFilenameFormat({\n fileName: fileUpload?.name || \"\",\n });\n return fileFormat.isImage;\n }, [fileUpload]);\n\n // This create a preview of the file, as a URL\n React.useEffect(() => {\n if (!fileUpload) return;\n const objectUrl = URL.createObjectURL(fileUpload);\n setDocumentPreview(objectUrl);\n\n return () => URL.revokeObjectURL(objectUrl);\n }, [fileUpload]);\n\n const resetFileUpload = () => {\n setFileUpload(null);\n setDocumentPreview(null);\n };\n\n return {\n isFileImage,\n documentPreview,\n setFileUpload,\n fileUpload,\n handleFileUpload,\n resetFileUpload,\n };\n};\n```\n\nIl suffit de l'utiliser avec input de type \"file\" pour le faire fonctionner.\n\n```tsx\nconst { documentPreview, handleFileUpload, isFileImage, resetFileUpload } =\n useFileUpload();\n \n\n```\n\n## 7. useAddressCombobox\n\nJ'ai découvert ce hook en lisant l'article de [Kent C. Dodds](https://kentcdodds.com/) nommé [Full Stack Components](https://www.epicweb.dev/full-stack-components). \nDedans, il nous explique la notion de composant full-stack : On déclare une route, mais au lieu de renvoyer une vue directement, nous exportons depuis cette route un hook, qui est typé et que nous pouvons ensuite utiliser partout.\n\nParfait pour un *combobox* d'adresse autocomplétée par exemple. Je l'ai adaptée pour utiliser l'API de Google ([Places API](https://developers.google.com/maps/documentation/places/web-service/overview)) et obtenir l'auto-complétion des adresses.\n\nCe hook nécessite de télécharger deux librairies pour fonctionner :\n\n- [Downshift](https://www.downshift-js.com/), une librairie que Kent a lui-même mis en place lors de sa mission à Paypal\n- [spin-delay](https://github.com/smeijer/spin-delay) pour afficher un spinner (suffisamment longtemps lors des petits chargements)\n\n```tsx\nuseAddressCombobox\nimport { useFetcher, useSearchParams } from \"@remix-run/react\";\nimport { useCombobox } from \"downshift\";\nimport { useEffect, useId, useState } from \"react\";\nimport { flushSync } from \"react-dom\";\nimport type { AddressComboboxType } from \"routes/get-address\";\nimport { useSpinDelay } from \"spin-delay\";\n\nexport const useAddressCombobox = ({\n defaultAddress = null,\n defaultPlaceId = null,\n onAddressChange,\n}: {\n defaultAddress?: string | null;\n defaultPlaceId?: string | null;\n onAddressChange?: ({\n address,\n placeId,\n }: {\n address: string;\n placeId: string;\n }) => void;\n}) => {\n const addressFetcher = useFetcher();\n const addressAvailabilityFetcher = useFetcher();\n\n const id = useId();\n const addresses = addressFetcher.data?.addresses ?? [];\n type AddressType = (typeof addresses)[number];\n const [selectedAddress, setSelectedAddress] = useState<\n null | undefined | AddressType\n >({\n address: defaultAddress ?? \"\",\n id: defaultPlaceId ?? \"\",\n });\n // An errored address is an address that was suggested by Google, but that is not associated with a zipcode.\n const [searchParams] = useSearchParams();\n\n const cb = useCombobox({\n id,\n\n onSelectedItemChange: ({ selectedItem }) => {\n setSelectedAddress(selectedItem);\n },\n items: addresses,\n itemToString: (item) => (item ? item.address : \"\"),\n defaultInputValue:\n defaultAddress ??\n searchParams.get(\"address\") ??\n \"\",\n onInputValueChange: (changes) => {\n addressFetcher.submit(\n { search: changes.inputValue ?? \"\" },\n { method: \"get\", action: \"/get-address\" },\n );\n },\n });\n\n const busy = addressFetcher.state !== \"idle\";\n const showSpinner = useSpinDelay(busy, {\n delay: 150,\n minDuration: 500,\n });\n const displayMenu = cb.isOpen && addresses.length > 0;\n\n\n return {\n displayMenu,\n showSpinner,\n selectedAddress,\n cb,\n addressFetcher,\n addresses,\n };\n};\n```\n\n## 8. useDateRanges\n\nPour les applications nécessitant de manipuler des dates, voici un hook permettant de les formatter sous forme de `string`. Elles peuvent ensuite être sauvegardées dans l'URL (sur les sites de réservation par exemple). \n\nNous exploitons dans ce hook la librairie [date-fns](https://date-fns.org) pour formatter la date. \n\n```tsx\nuseDateRanges.tsx\n\nimport {\n parseStringToDate\n} from \"app/shared/dates.ts\";\nimport {\n differenceInDays\n} from \"date-fns\";\nimport React, { useMemo } from \"react\";\nimport { useSearchParams } from \"react-router\";\n\n\nconst getDateDifferenceInDays = ({\n endDate,\n startDate,\n}: {\n endDate: Date;\n startDate: Date;\n}) => {\n // Always add more day, to include the current day\n const dateDifferenceInDays = differenceInDays(endDate, startDate) + 1;\n\n return dateDifferenceInDays;\n};\n\nexport const useDateRanges = ({\n defaultEndDate = null,\n defaultStartDate = null,\n defaultAdditionalDate = null,\n minDate = null,\n}: {\n defaultStartDate?: string | null;\n defaultEndDate?: string | null;\n defaultAdditionalDate?: string | null;\n minDate?: string | null;\n}) => {\n const [searchParams] = useSearchParams();\n\n const startDateParam = searchParams.get(\"startDate\");\n const endDateParam = searchParams.get(\"endDate\");\n\n const minimumDate = new Date(minDate) || new Date()\n\n const [selectedDates, setSelectedDates] = React.useState<{\n startDate: string;\n endDate: string;\n additionalDate?: string;\n }>(() => {\n return {\n startDate: defaultStartDate ?? startDateParam ?? \"\",\n endDate: defaultEndDate ?? endDateParam ?? \"\",\n additionalDate: defaultAdditionalDate ?? \"\",\n };\n });\n\n const isOutated = React.useMemo(() => {\n if (!selectedDates.startDate) return false;\n const startDate = parseStringToDate(selectedDates.startDate);\n\n return startDate < minimumDate;\n }, [selectedDates?.startDate, minimumDate]);\n\n const dateDifferenceInDays = useMemo(() => {\n if (!selectedDates.startDate || !selectedDates.endDate) return 0;\n return getDateDifferenceInDays({\n endDate: parseStringToDate(selectedDates.endDate),\n startDate: parseStringToDate(selectedDates.startDate),\n });\n }, [selectedDates.endDate, selectedDates.startDate]);\n\n return {\n selectedDates,\n setSelectedDates,\n minimumDate,\n isOutated,\n dateDifferenceInDays,\n };\n};\n```\n\n## 9. useLocalStorage\n\nCe hook est très pratique pour sauvegarder des informations dans le [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)\n\n> Le `localStorage` est une base de donnée présente directement dans le navigateur, qui permet par exemple de sauvegarder les informations de l'utilisateur comme son thème, s'il a accepté les cookies, ou toute information utile pour améliorer l'expérience utilisateur.\n\nCette version du hook nécessite de télécharger la librairie [usehooks-ts](https://usehooks-ts.com/). Il existe également des alternatives natives à React.\n\n```sh\nTerminal\nnpm install usehooks-ts\n```\n\n```tsx\nuseLocalStorage.tsx\nimport {\n useCallback,\n useEffect,\n useState,\n type Dispatch,\n type SetStateAction,\n} from \"react\";\n\nimport { useEventCallback, useEventListener } from \"usehooks-ts\";\n\ndeclare global {\n interface WindowEventMap {\n \"local-storage\": CustomEvent;\n }\n}\n\ntype SetValue = Dispatch>;\n\nexport function useLocalStorage(\n key: string,\n initialValue: T,\n): [T, SetValue] {\n // Get from local storage then\n // parse stored json or return initialValue\n const readValue = useCallback((): T => {\n // Prevent build error \"window is undefined\" but keeps working\n if (typeof window === \"undefined\") {\n return initialValue;\n }\n\n try {\n const item = window.localStorage.getItem(key);\n return item ? (parseJSON(item) as T) : initialValue;\n } catch (error) {\n console.warn(`Error reading localStorage key “${key}”:`, error);\n return initialValue;\n }\n }, [initialValue, key]);\n\n // State to store our value\n // Pass initial state function to useState so logic is only executed once\n const [storedValue, setStoredValue] = useState(readValue);\n\n // Return a wrapped version of useState's setter function that ...\n // ... persists the new value to localStorage.\n const setValue: SetValue = useEventCallback((value) => {\n // Prevent build error \"window is undefined\" but keeps working\n if (typeof window === \"undefined\") {\n console.warn(\n `Tried setting localStorage key “${key}” even though environment is not a client`,\n );\n }\n\n try {\n // Allow value to be a function so we have the same API as useState\n const newValue = value instanceof Function ? value(storedValue) : value;\n\n // Save to local storage\n window.localStorage.setItem(key, JSON.stringify(newValue));\n\n // Save state\n setStoredValue(newValue);\n\n // We dispatch a custom event so every useLocalStorage hook are notified\n window.dispatchEvent(new Event(\"local-storage\"));\n } catch (error) {\n console.warn(`Error setting localStorage key “${key}”:`, error);\n }\n });\n\n useEffect(() => {\n setStoredValue(readValue());\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const handleStorageChange = useCallback(\n (event: StorageEvent | CustomEvent) => {\n if ((event as StorageEvent)?.key && (event as StorageEvent).key !== key) {\n return;\n }\n setStoredValue(readValue());\n },\n [key, readValue],\n );\n\n // this only works for other documents, not the current one\n useEventListener(\"storage\", handleStorageChange);\n\n // this is a custom event, triggered in writeValueToLocalStorage\n // See: useLocalStorage()\n useEventListener(\"local-storage\", handleStorageChange);\n\n return [storedValue, setValue];\n}\n\n// A wrapper for \"JSON.parse()\"\" to support \"undefined\" value\nfunction parseJSON(value: string | null): T | undefined {\n try {\n // @ts-ignore\n return value === \"undefined\" ? undefined : JSON.parse(value ?? \"\");\n } catch {\n return undefined;\n }\n}\n```\n\n## 10. useQueryState\n\nCe hook s'utilise comme [useState](https://react.dev/reference/react/useState), mais va sauvegarder les valeurs comme [paramètres d'URL](https://fr.wikipedia.org/wiki/Cha%C3%AEne_de_requ%C3%AAte).\n\n![Exemple de paramètres d'URL](https://algomax-public.s3.eu-west-3.amazonaws.com/what_are_url_parameters_1cd183d8b2.png)\n\nDans quel cas vas-tu utiliser les `paramètres d'URL` ?\n\n- pour sauvegarder les filtres sur une application de réservation comme [leboncoin](https://www.leboncoin.fr) ou [Airbnb](https://www.airbnb.com).\n- pour la pagination d'un blog (numéro de page sélectionné, limite d'articles affichés).\n- pour sauvegarder la valeur d'une barre de recherche (comme sur [Google](https://www.google.com) par exemple)\n\nPour ce faire, je te présente la librairie [nuqs](https://nuqs.47ng.com), qui vient exploiter les hooks natifs à Remix (comme [useSearchParams](https://api.reactrouter.com/v7/functions/react_router.useSearchParams.html))\n\nL'exemple le plus simple se trouve sur la documentation de [nuqs](https://nuqs.47ng.com/docs/basic-usage)\n\n```tsx\nDemo.tsx\n\nimport { useQueryState } from 'nuqs'\n \nexport function Demo() {\n const [name, setName] = useQueryState('name')\n return (\n <>\n setName(e.target.value)} />\n \n

Hello, {name || 'anonymous visitor'}!

\n \n )\n}\n```\n\nL'avantage de ce hook est sa simplicité d'utilisation. L'auteur de la librairie, [François Best](https://x.com/fortysevenfx) nous propose une **expérience développeur** d'exception. \n\nSes nombreux `parsers` permettent de valider tout type de donnée (full typesafe) :\n\n- `parseAsString` (les paramètres sont des *string* par défaut)\n- `parseAsInteger` pour les entiers\n- `parseAsFloat` pour les chiffres à 2 décimales\n- `parseAsBoolean` pour les booléens\n- `parseAsStringLiteral` pour les *string literals*\n- et bien plus (les dates, les valeurs hexadécimales, les *enums* ...)\n\nLe hook **useQueryState** prend comme premier argument le nom du `paramètre d'URL`. Le deuxième argument est optionel, et peut soit être le `parser`, soit un objet de configuration :\n\n```tsx\nuseQueryState.tsx\nimport { useQueryState, parseAsInteger } from 'nuqs'\n\nconst [search] = useQueryState('search', { defaultValue: '' })\n// ^? string\n \nconst [count] = useQueryState('count', parseAsInteger)\n// ^? number | null -> no default value = nullable\n \nconst [count2] = useQueryState('count', parseAsInteger.withDefault(0))\n// ^? number\n```\n\n> J'ai de nombreux paramètres d'URL différents à gérer, comment faire ?\n\nUtilise le hook [useQueryStates](https://nuqs.47ng.com/docs/batching) (au pluriel), pour gérer un objet de plusieurs `paramètres d'URL`.\n\n```tsx\nimport { useQueryStates, parseAsFloat } from 'nuqs'\n\nconst [{ latitude, longitude }, setCoordinates] = useQueryStates(\n {\n // Use variable names that make sense in your codebase\n latitude: parseAsFloat.withDefault(45.18),\n longitude: parseAsFloat.withDefault(5.72)\n },\n {\n urlKeys: {\n // And remap them to shorter keys in the URL\n latitude: 'lat',\n longitude: 'lng'\n }\n }\n)\n \n// No changes in the setter API, but the keys are remapped to:\n// ?lat=45.18&lng=5.72\nsetCoordinates({\n latitude: 45.18,\n longitude: 5.72\n})\n```\n\nJ'espère que ces hooks vous seront utiles !",[108,111,112],{"_24":109,"_26":110},"cma0ygytr0002yk67fi9yxtr2","React Router 7",{"_24":46,"_26":47},{"_24":113,"_26":114},"cma0ygyr10000yk674psikbwx","Remix",{"_24":116,"_51":117},"cma0ygz2m000ayk67bs6pgohz","Virgile",{"_55":119},5,{"_59":121,"_61":122,"_63":123,"_65":124},"14 min read",13.04,782400,2608,{"_69":126,"_71":127,"_73":128,"_75":129},"https://algomax-public.s3.eu-west-3.amazonaws.com/402f9750-3c16-4925-bd5c-10fe46e2ace9.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVPNRXAVVQGI3HZAS%2F20260202%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20260202T210755Z&X-Amz-Expires=3600&X-Amz-Signature=c8be1685d5e0b5a517716e90dcae1a20b85211cad4a30574c7ebf06ccffea817&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","React Router 7 ",1280,720,"pagination",{"_132":133,"_134":135,"_136":137,"_138":139},"page",1,"pageSize",3,"pageCount",11,"total",31,[141,146,153,158,165,170,176,181,186,193],{"_24":142,"_26":143,"_28":144,"_145":-5},"cma0ygyvx0004yk67z5ezcv8p","Application mobile ","application-mobile-","image",{"_24":147,"_26":148,"_28":149,"_145":150},"cma0ygyz00007yk677i1tjff2","NodeJS","nodejs",{"_24":151,"_69":152,"_71":148},"cma239buz0006ykoznafwzvow","https://algomax-public.s3.amazonaws.com/67e309ee-8db1-4816-b4ab-f9962c33d4f1.png",{"_24":40,"_26":41,"_28":154,"_145":155},"docker",{"_24":156,"_69":157,"_71":154},"cma238g0g0002ykozkuyvfu7r","https://algomax-public.s3.amazonaws.com/40436d76-e4c0-43a1-9683-019adf5e9014.png",{"_24":159,"_26":160,"_28":161,"_145":162},"cma0ygywx0005yk67arcm0kw4","Figma","figma",{"_24":163,"_69":164,"_71":160},"cma24o2wh0007ykozlzifidx0","https://algomax-public.s3.amazonaws.com/7019f576-4bb9-4167-b567-c09745898615.png",{"_24":43,"_26":44,"_28":166,"_145":167},"nestjs",{"_24":168,"_69":169,"_71":44},"cma24pvg10008ykozfti5xo0h","https://algomax-public.s3.amazonaws.com/eae71424-33db-4162-8f02-d08a2e20a622.png",{"_24":109,"_26":110,"_28":171,"_145":172},"react-router-7",{"_24":173,"_69":174,"_71":175},"cma24rd2e0009ykozhi6zylip","https://algomax-public.s3.amazonaws.com/512552ae-927c-4a83-9513-d850ff83e574.png","React Router 7 logo",{"_24":46,"_26":47,"_28":177,"_145":178},"reactjs",{"_24":179,"_69":180,"_71":47},"cma24srkf000aykozg11d0dk2","https://algomax-public.s3.amazonaws.com/f10999d5-e739-4bc3-afb4-8211ec7b9f49.webp",{"_24":113,"_26":114,"_28":182,"_145":183},"remix",{"_24":184,"_69":185,"_71":114},"cma24tcao000bykoz44554mdv","https://algomax-public.s3.amazonaws.com/e317a065-d836-4232-8ae5-7de6a9ff5277.png",{"_24":187,"_26":188,"_28":189,"_145":190},"cma0ygyxz0006yk67t7rx9ota","Strapi","strapi",{"_24":191,"_69":192,"_71":189},"cma2394060005ykozjkxqqoh2","https://algomax-public.s3.amazonaws.com/74c12025-c0f3-4778-83cf-5b69765baaa1.png",{"_24":86,"_26":87,"_28":194,"_145":195},"terminal",{"_24":196,"_69":197,"_71":198},"cma238oi20003ykoz7fpuawz5","https://algomax-public.s3.amazonaws.com/2d6946a5-e89f-4536-a021-ab7cfda0cc36.png","Terminal (iterm)","courseBackLinks",[201,205,207,211,214,217],{"_26":202,"_28":203,"_204":-5},"Développe une application de mise en relation avec Remix.js, NestJS, Typescript, Turborepo","developpe-une-application-de-mise-en-relation-avec-remix-js-nest-js-typescript-turborepo","landingPageUrl",{"_26":110,"_28":171,"_204":206},"/formation-react-router-7",{"_26":208,"_28":209,"_204":210},"Crée ta première app Next.js 15 full-stack avec Prisma et RSC","developper-une-app-next-js-15-full-stack-avec-prisma-et-rsc","/creer-ta-premiere-app-nextjs-15",{"_26":212,"_28":213,"_204":-5},"Créer un site e-commerce moderne avec Remix et Strapi 5","creer-un-site-e-commerce-moderne-avec-remix-et-strapi-5",{"_26":215,"_28":216,"_204":-5},"Développe une app de chat temps réel avec Remix et NestJS","developpe-une-app-de-chat-temps-reel-avec-remix-et-nestjs",{"_26":218,"_28":219,"_204":-5},"Backend IA TypeScript : Hono, Prisma, Auth & images","backend-ia-typescript-:-hono-prisma-auth-and-images","chats",{},"sessionData","env",{"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236},"GOOGLE_CAPTCHA_SITE_KEY","6Lfia0UkAAAAACBikkfHI1VNoRkyUK99pofGRHvD","ALGOMAX_ENV","production","FRONTEND_URL","https://algomax.fr","GTM_ID","GTM-5QP7LX7","GA_ID","G-N1C6D1CR5Z","FB_PIXEL_ID","726790966507971","user","requestInfo",{"_240":241,"_246":247,"_248":249},"hints",{"_242":243,"_244":245},"theme","light","timeZone","UTC","path","/signin","userPrefs",{"_242":-5},"routes/_marketing+/_publicLayout",{"_24":252,"_253":254,"_26":110,"_28":171,"_255":256,"_257":256,"_258":259,"_260":259,"_261":-7,"_262":-7,"_263":264,"_265":6,"_266":-5},"cm7rklwvw000096e6vbtqns1v","accessType","PAID","price",599,"originalPrice","totalSavingsInEuros",0,"totalSavingsInPercentage","endSaleDate","promoCode","pagesRemainingAtCurrentPrice",90,"onboardingCompleted","onboardingData","routes/_marketing+/_auth+/signin",{"_269":-7,"_270":271},"lastUsedProvider","activePage","password","actionData","errors"]

Se connecter