Over time, a buildup of code can gradually impair the speed of the

Currently, I am in the process of working on a project for my Web Programming course at University. The homepage is almost complete, but during testing, I noticed that each time the scroll event is triggered, there is a significant slowdown.

This particular event is responsible for altering the appearance of my navigation bar. When the page is at the top, the navigation bar sits at the top right with elements listed vertically. However, when anywhere else on the page, it moves below the title bar and the elements are listed horizontally.

To better diagnose the issue, instead of pasting the entire code here, I have provided a link to my GitHub repository where you can view the project:

https://github.com/edargham/Project-CSC443-Web

Answer №1

This specific line of code gets executed every time the component renders, leading to a buildup of listeners for the scroll event on the window. It is recommended to handle this only once.

UPDATE:

The common practice is to attach a listener in either componentWillMount or componentDidMount, and then remove it in componentWillUnmount. For more details on which functions to use for this purpose, refer to this resource.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Script to alter div style based on the day of the week

Check out my project: http://jsfiddle.net/yL0o1cy0/ .calendar { width: 850px; height: 500px; background-color: #141414; border-radius: 10px; padding-top: 10px; margin-top: 15px; margin-left: 15px; } #calendartest1 { width: 778px; heigh ...

Analyzing past UTC date times results in a peculiar shift in time zones

When I receive various times in UTC from a REST application, I encounter different results. Examples include 2999-01-30T23:00:00.000Z and 1699-12-30T23:00:00.000Z. To display these times on the front end, I use new Date(date) in JavaScript to convert the ...

Please make sure to only choose one checkbox at a time

I have designed a list-type menu using the bootstrap list group. My goal is to have only one main category active at a time. For example, if "Main Category One" is selected and then I click on another category, "Main Category Two" should become activated w ...

Show real-time notifications for updates and releases on a React Redux application

I'm currently working on a react + redux app and I need to have the ability to dynamically display notifications or messages about new features/updates at the header of our application. These messages will be entered as text input in a component calle ...

Issues with Contenteditable functionality in JavaScript

My goal is to make a row editable when a button is clicked. $(":button").click(function(){ var tdvar=$(this).parent('tr').find('td'); $.each(tdvar,function(){ $(this).prop('contenteditable',true); }); }); <s ...

Adding a PNG icon to a label in JavaScript: A step-by-step guide

How can I add a png icon alongside the label for Yourself? <div class="ui-grid-a" style="display: inline"> <label class="text-light ui-block-a">Post as: </label> <label class="link toggle-post ui-block-b" > ...

JQuery not updating the visibility of elements with the "d-none" class when switching to another tab

Currently, I am attempting to conceal a specific section of my webpage in order to display a "loading" spinner. I achieve this by employing jQuery to add the class "d-none" and remove the class "d-none" from the desired element that needs to be hidden or s ...

Two adjacent div tags spanning the full width of the page, with differing widths (40% and 60%) that resize to 100% width and stack on top of each

I've been experimenting with a layout challenge and running into some obstacles. Two div tags are at the heart of the issue. Div A features an image with a default size of 768 x 400, while Div B displays an image at 1152 x 400. These images are meant ...

Exploring a JSON Object with Nested Data

I am trying to recursively parse a JSON object in JavaScript. Below is an example of the JSON structure: const obj = { tag: 'AA', type: 'constructed', value: 'ABCD1', child: [ { tag: 'BB', ty ...

What is the best method for storing and accessing audio files that users upload in my MERN application?

I am developing a MERN application and am looking to implement a feature that allows users to upload audio files. I have read that storing the files directly in the database or within a folder inside the app is not recommended. I need a solution that en ...

Performance problem with 'Point-along-path' d3 visualization

I recently explored a d3 visualization where a point moves along a path, following the code example provided at https://bl.ocks.org/mbostock/1705868. During this movement, I observed that the CPU usage ranges from 7 to 11%. In my current project, there ar ...

I need to extract the entire footer, including all HTML elements and text, using PHP's DOMXPath

I am looking to extract the footer content, including all HTML tags and text, using DOMXPath. Here is an example of the HTML structure: <div class="footer"> <div class="footer-new"> <div class="footer-additional"> <div class="add- ...

Javascript - EventListener triggers responses to clicks on the entire span on both its left and right sides

I recently delved into the world of JavaScript and decided to challenge myself by creating a TicTacToe game for educational purposes. If you're curious about what my simple game looks like so far, here's a link to it: In the game, I prompt the ...

Authentication using HttpOnly cookies

export const login = (credentials) => async (dispatch) => { try { const { data } = await axios.post("/auth/login", credentials); dispatch(gotUser(data)); socket.emit("go-online", data.id); } catch (error) { console.error(error); ...

Creating a new JavaScript object using a Constructor function in Typescript/Angular

Struggling with instantiating an object from an external javascript library in Angular/Typescript development. The constructor function in the javascript library is... var amf = { some declarations etc } amf.Client = function(destination, endpoint, time ...

Step-by-Step Guide: Exporting a div to a beautifully formatted PDF with NextJs

Currently, I am working on an app project that involves filling out forms and having the information automatically formatted into a div to generate CLP labels. My goal is to be able to export this div in pdf format while also being able to select sizes ran ...

What is the best way to stop a jQuery event listener on a button within a form from triggering upon the user hitting the Enter key?

Here is an example of a form containing a button: <form> <input type="text"> <button>Click Me</button> <input type="submit" value="Submit"/> </form> Using the following JavaScript: $('form').subm ...

Incorporate a CSS design element in the lower right corner of the screen by adding a box

I'm looking to create a layout where a list of cards is displayed with maximize, minimize, and close buttons located at the bottom right of each card. The cards should be arranged from bottom right to left, but I'm having trouble achieving this p ...

The spotlight is shifting towards validating a datepicker field using jQuery

I am currently working on validating a datepicker field using jQuery. However, whenever I try to validate it, the calendar popup opens up. I only want to display the validation message without the datepicker popup. ...

Adjust the height of the bootstrap carousel

I'm struggling with adjusting the height of my bootstrap carousel. Altering the width of the carousel div impacts the size, but I want to maintain full width while changing the height so that only half of the image is visible and centered within the e ...