Muhammad Abubakar’s Post

I just faced an interesting challenge in #nextjs app router v15 (server component): the loading state wasn’t triggering when query parameters (searchParams) changed. Although data was correctly re-fetched from the backend, the suspense loader wasn’t activated. This behavior can confuse users expecting visual feedback during loading. Reason (correct me if I am wrong): Reason: This happens because #React’s reconciliation process sees no change in the Suspense tree when only the query parameters update. Without a unique identifier, React doesn’t treat the state change as significant enough to re-render the loading state. Here is the quick fix ⚒️ : To address this, I introduced a unique key to the Suspense component, dynamically generated based on the query parameters. By doing this, React recognizes a “new” instance of the Suspense component whenever the parameters change, ensuring that the loading state is properly triggered.

GopherSecurity App v0.0.2-02 is released! 07/17/2024 Added (listed oldest to newest) - Implement gopher router Changed (listed oldest to newest) - Update gopher-net lib v83 - Update about content - Update network class model - Update progress loader integration

Do you know that there are restricted Headers in Postman Chrome Extension? If you use Postman Chrome Extension, you will not find all headers. Chrome and the XMLHttpRequest specification restrict those. Here is the list of restricted headers in the Chrome extension: ● Accept-Charset ● Accept-Encoding ● Access-Control-Request-Headers ● Access-Control-Request-Method ● Connection ● Content-Length ● Cookie ● Cookie 2 ● Content-Transfer-Encoding ● Date ● Expect ● Host ● Keep-Alive ● Origin ● Referer ● TE ● Trailer ● Transfer-Encoding ● Upgrade ● User-Agent ● Via If you need to use those headers, there are two ways. First, install the “Postman Interceptor” extension from the Chrome web store. (https://lnkd.in/dS--MSng) The second method is to use the native Mac or Windows version of the Postman app. (https://lnkd.in/dSeKfJm9)

Did you know about using unref, ref, and hasRef with timers in Node.js? unref(): Allows the program to exit if no other active timers or I/O operations exist. This is handy when you want a timer to run but don't want it to block the app from exiting. You also have ref() and hasRef() https://lnkd.in/d2kg-7dq Great article from httptoolkit https://lnkd.in/dpD5JEjM

💻 NAIX App Update v3.15.1: Enhanced File Upload Speed This update greatly improves the upload speed for large files. Previously, users experienced a delay when uploading big files like a 1 GB zip, as they had to wait until the file was completely processed. Now, you'll get a quicker response right after the file upload finishes, making it feel much faster, especially for large files. Enhanced Download Monitoring with Progress Bar Stay informed with our new Download Progress Bar: We've added a progress bar on the details page for each download, allowing you to visually track the status of your downloads in real time. This feature aims to improve your interaction with file downloads, giving you better insight into the completion time and progress. Highlights of the Update: - Improved Upload and Download Speeds Faster data transfer rates to enhance efficiency. - Download Progress Bar: Visual tracking of download status on the details page. To stay informed of any new updates, check our Changelog page under this link: https://naix.ai/changelog

Pro tip: Don't bother upgrading your app from node 8.x. Just add some sed magic to your Dockerfile to remove the annoying 60-second wait. - RUN curl --retry 5 -sL $URL/setup_8.x| bash - \ + RUN curl --retry 5 -sL $URL/setup_8.x | sed -e '/sleep/d' | bash - \

made my first React, a todo list app and while making it i learnt state management, saving data on local storage, using onChange function with React and much more.

What is a Twelve-factor App? The twelve-factor app is a guideline for developing cloud-native applications, which starts with simple things like version control of your codebase, and environment-aware configuration. The following are the main points- 1. Codebase 2. Dependencies 3. Config 4. Backing Services 5. Build, release, run 6. Processes 7. Port Binding 8. Concurrency 9. Disposability 10. Dev/prod parity 11. Logs 12. Admin processes Follow me for more KCNA stuff- 🙂

GopherSecurity App v0.0.2-03 is released! 07/19/2024 Added (listed oldest to newest) - Implement gopher dump Changed (listed oldest to newest) - Update gopher-net lib v84 - New network lib with fix-ups - Skip custom subnet for router node

Every time I see developers using “use client” in the page.js/ts file of Next.js App Router 😀 Some fundamental aspects of the Next.js 14 App Router: - By default, components are React Server Components for several good reasons(see in the comment below) - Make a component as a client component only when you need to… (ex: you need to do something on user interactions like, click, scroll, etc) - Try moving the client components as much as the bottom of the hierarchy as possible. - Do not try to solve your problem with the “use client“ directive always. Look into the aspects of how client component can be used in server components, how server components can be passed as props to client components, how server actions are come in handy for forms, etc… Use Next.js to your advantage, do not abuse it 🙌