When building a React application, we often rely on third-party dependencies to enhance functionality and streamline development. However, over time, our project might accumulate unused dependencies, leading to unnecessary bloat and potential security vulnerabilities. In this Answer, we'll explore how to efficiently remove these unused dependencies and ensure a leaner, more maintainable codebase.
The first step is to identify which dependencies are unused. Depcheck is a handy tool used in software development to identify unused or outdated dependencies within a project. It scans through the codebase and generates a list of no longer necessary dependencies. This helps developers streamline their projects by removing unnecessary components, improving performance, and reducing potential compatibility issues.
Run the following command to enlist the unused dependencies:
npx depcheck
npm uninstall <packages_list_separated_by_space>
Let's look at an example in which we create a simple portfolio application that includes some unused dependencies. Click the "Run" button to execute the application. Once it executes successfully, the application can be viewed in the "Output" tab and on the URL provided right after "Your application can be found at:".
ãF ) 95@@ °nPNG
IHDR(-SäPLTE""""""""""""""""""2PX=r)7;*:>H¤-BGE8do5Xb6[eK®K¯1MU9gs3S\I§:gt'03@{V¹ÔT´ÏA}V»Ö@y6\fH¦-CII¨E+;@7_i7_jFJ«K°H£-BHaÚû,@FCL³&.0W½ÙN£ºI¨$)+BJªR¯È?v>s>uS±Ê=qP©ÁP¨ÀP§¿,?D4U^%+-M ¶K®%+,2OX+<AL²#&&D%,.I©vôTötRNSIæçJäeÀe¦©IDATxMµZEA ÿÙ³ îî%R¡ïßáTThÇG
»,Á®Å=²ÒîmífímnfA$â>!¦gºôHg½Eßܵ} Ý»ýº¼kdú§¯JoÎ3æL"J¹ ÌÕüQ$âçļ ffµ,é5i9̯H¨ /mBwÍÜw;D
Ø+&W«ª¹¨Dôo@Ê´RI©ÐB¡om.Û³ÀIEND®B`PNG
IHDRשÍÊePLTE""""""""""""""""""""""""2RZN¢¹J«3R[J¬)59YÁÞ0KS4W`Q«ÄL²%+-0JR)6::gtC"##?vU·Ñ?w<n{&-/YÂß=q:iuBA}A{B/IPP§¿=qK®_ÔóL³$();lzR¯ÉaÚûI¨ZÆã3U^1MU3T]ZÅâI§X¿ÜF-BGP¨À6[e,@E5ZdO§¿-BHX¿Û+=AW¾Ú,@FW¼ØQªÃ?v
W¼×+<A@y"#$\Ìê4Wa\ÌëS²Ì$(*.EL^ÑñVºÕ6]h#$%G¡#&';jwV¹Ô-CIL±ZÄá^Ðï>uS°Ê/HNM ·_Õõ\ËéM ¶8doD
D>t+=B[Èæ,>C>t<o}@y0LS.EKT´Î$'(%,.A~W½ÙC%+,\ÊèC!ä tRNSíîG¾ÖOIDATxlÃB¶Q
u´ß_ȳ<˦Ýv eê²óa6Aξûv¢{@ÎE'ÞdIÕ!ç í ðCÔT þg 1ÂE(ÏñSQsâi
Ä
Zÿ·V¹ Ð)ég!ªhÎùtéº-i}µµ<Õ?¶lBZaÄ´4{DÓâ»_e8¥yÇÀ 3)¥?°f;8.ã ¤tÌ=å; :ã52fKZìlù¨ØÍ9.#ÒAÁqÌúÛ ®£Vÿ`=$¬Â?_¶¾®ÔqMç.ïJ$
?^q÷ñíÛï.},ìsæÝ _TttÔ¾1#/(ì-[è`è`ÌÚïÅðZ d5?ÎebZ¿Þi.Ûæ ìqÎ+1°}Â5ùïçd¨GÏøIEND®B`PNG
IHDR D¤ÆAPLTE"""""""""""""""""""""""""""2RZVºÖ_ÔôU·Ñ=r$()'25]ÎíC0LS<o}XÀÜX¿Û0JQ=p~D<n{VºÕE8do_ÔóEFH¥9dp_ÕõH¤I¨F6[e`Ö÷`×øL³/GM_ÓòU¸Ó'02P©Á/IPPªÂX¿Ü&/1;ly3R[`ØøG¡T³Í\ÌêaÚû1OW"##Q«ÄaÙúR®Ç=q`Öö.EL+=ATµÐ-CIK®#&'C^ÐïI¨&.04U^^Ñð@yZÇä$(*[Éç^Ññ,?DR¯É"#$1NV1MTD
>u;kxG R¯È/HN&-/@y>s>t@z]ÍìP¨À$'(D]Ïî<n|0JRU·Ò×\¼ tRNS%ñ'ïó(ò~ÑÝèIDATxC1F_Ý¿MmÛ¶4¶m{ÿ ¤nçáÓ ®A$à$b HeøTãWÄÂhh´:PtZ
Q«0@.`Þ`4-V`³Zì&A#ÁébkÝÄãñúØ>.''ø`C$FØÏ (±x"6XácTÚéL§@Iù;dd-¹|¾P,È9¡RÕÍf3¢¿F½VmM íX§ÚíÍç@Y7ÎõºÕN¬= åÈʪu
}Ö¬«+eaiq ¤Ö76íÝ=h
ûZìíî lë}á¨Ê±¥[F«I9A¹k9¥Öë ä3¢Ã9ΡóqB~Øáb¸ÃåU_¸^Ü[·ôwý{zvzÙ(£(£(þfòqÉGÉïkñÏçY¾ÿªfäòÇ~à:*4ÓQ\O> ¼<×úW£éÍZ|ÞÅ7ñïjTÔäãn½»¢®`$Hð+ò¿GOñûð*èxø¥X*|^ÿdIEND®B`PNG
IHDR@@·ì:PLTE"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""%+-@yW¼×`×ø^ÑñS²ÌC,>C*8<XÁÝaÚûaÙùMµ+<AaÙúXÀÜ#%%TµÐL´=q>uK°`ÖöA}L±8do=r%+,@y^ÐïS²Ë)59=qP©ÁU·Ò"#$PªÂ\Êè0JQQªÃ"##U·Ñ#&&_Ôô>t>s`Øø_Ôó5Yc1OW5Zd1NV+=B1MU+;@/GM\Ìê*;?3S\)8<2RZ_Õõ+=A]Ïî,@F,@E&-/0KS7alO¦¾9dp8amB~EP¨ÀN¢¹'023T]]Îí?x3U^C6\gU¸Ó&.0D7_iRÆH¥I¨M ¶$(*?v
ZÆãX¿Ü-AG#$%[Éç8co[ÈæW½ÙC'25?v8bn%*+L²N£º2PX)7;=p~(58^ÒòP§¿4WaQ«ÄT´Ï0JRQ¬ÅT´ÎI¨6]hR¯ÉT³Í0LSF9eqEE9gsFC#&'\Ëé`Ö÷&/16\fBA{R®Ç]Íì(47%,.*:>*9=9fr:gt7^iU¶Ð?wZÇäX¿Û^ÑðQÅH£)6:V¹Ô'034U^E.EL.FMK®@zS× tRNS*×øÖý »½+üùóÔ,ØúôÀ=V IDATx¤ËµC!ÐïC|ÿãÚ^yR]ÕMÛáO]ßÔÕÝ0NÈ2ÍËí¿"ªª¢(0Vã(ÀY%PDT-~(m¬ó!âK ÞY£~´üIÒf{³Û Þáa¼§§ô3ÕOp& Ф¡x÷#jôÚ¶mméòc)]m¤É)Ƨgfçhk²ñÎÒ ægg¦ÇìÐ+XÅêuiyVת·k«°²\[ü:,Ø6ØÜjIJ
;»"»;°×XùþÛfÁáÇÍûýSÎÎÏÏ8=Þo¾;æèÐ(öÓ¥BkÔeûÍ\7p+mîîáþNÚ<ÀQðOÒæùô³´yg»ttÐëoý½£ìVð»Òäsýü¬ø&_ðaüïV~à·Ö?*8àQ ;8¥Á,¸¤ f¥ 1 Üx¤×§ñ*øÑA¯Ôð°a#±³¶¦#nPi+¼¶CÈ,ÆèäÍ_áNbÑáøçHB*ÚÒ¦ L(^<ñÃL6pJ¾PÉ¥©¢%"R,ä9Èe3eRËa1(
¢ßqÇ8Ù´mK˱mƶmÛü·yi!èΪYÏuë ÀÏ_Àï?i÷ý+òÄA|ù{´?¿_En).JËD¤<
©¬¢Z\Ts©R*( ¯©J
uX/
4J9¡5·DEµ4kÇ4&i¥V4Ú¡®Ð¯vsf:àg,¢èBC»î$¶ºÍùîá@ôI_?< ! ^ÈàÓ½ÇöäõB%Làw±FD1Á¨(F ±ø H%0Ʊ¿ÅØ(¢0ÅÄ'ÅæN.0u@íYPWìIüaNâK Ä?ðÓµ=ev/c±Ó0c0÷2Êë:06R-uÒÄ\Q̶ää´¼µ6R#
ÆF³6Òñ·rÕìuæmâðÂIñi~ Åü ÃsPþ"± ó¼
eiyå£ËPàãÊò§¡ÝÒ,S]U¦ºV
ªÖ©®Z¦êoëë·xzãâÆSnm¬{ÚºwaÙÏ
Å»´Ýõ(mg/®þå½À¿¼û[§b³µq¶Å&Õ¯¹$ñzÈH>aÌKT1/æø1O0¾.hÍYþAÓö£
-ê>Ûº«¢XÕ¢î}ߨë ÛÑ;ÃöN´ØvÅýθÿ1ë×ÄO@&v/Äþ_ö\ôÇ\í.½+0; !fÊ ¦´Ó% JY·OÂ'/Å]_;ßÀ'"&Nªn aQ^cx¦AáÒIEND®B`Now, click the "Terminal" tab next to the "Output" tab, stop the server using the keyboard shortcut "Ctrl + C" and run the npx depcheck command to see the list of unused dependencies. We have the following two unused dependencies:
@testing-library/user-event
axios
Now execute the following command in the terminal to remove these unused dependencies from the application:
npm uninstall @testing-library/user-event axios
Once removed, run the npx depcheck command to verify if the packages have been removed
When getting rid of dependencies we don’t need in React, keep the following in mind:
Thoroughly review the codebase to ensure that imported components, functions, or libraries from each dependency are indeed being used.
While cleaning up, consider updating any outdated dependencies using the command like npm update.
Use tools like ESLint with plugins such as eslint-plugin-react to automate identifying and removing unused imports. For example, we can use the following command to find the files which contain the unused imports:
// Replace the <FolderName> with the name of the folder that contains our components.
npx eslint <FolderName>
After removing unused dependencies, run the application to ensure that the removal has not caused any issues.
Efficiently managing dependencies is crucial for maintaining a React application. We can identify and remove unused dependencies using a combination of tools and commands like depcheck and npm uninstall. Following these steps can keep our React project clean, resulting in a better development experience and a more robust application.
Free Resources