Research optimising, and usage of React hooks

c24elipe commented

2026-04-13 08:25:24 +00:00

Collaborator

No description provided.

c24elipe added the

frontEnd

research

labels

2026-04-13 08:25:39 +00:00

a24noabe was assigned by c24elipe

2026-04-13 08:25:43 +00:00

a24danwe was assigned by c24elipe

2026-04-13 09:57:02 +00:00

a24danwe commented

2026-04-13 10:52:17 +00:00

Collaborator

Commonly used Hooks:

State Hooks: useState, useReducer
Effect Hooks: useEffect, useLayoutEffect
Context Hooks: useContext
Ref Hooks: useRef
Callback Hooks: useCallback, useMemo
Layout Hooks: useDimensions, useWindowSize
Form Hooks: useForm
Animation Hooks: useSprings
Custom Hooks

Medium

Commonly used Hooks: 1. State Hooks: useState, useReducer 2. Effect Hooks: useEffect, useLayoutEffect 3. Context Hooks: useContext 4. Ref Hooks: useRef 5. Callback Hooks: useCallback, useMemo 6. Layout Hooks: useDimensions, useWindowSize 7. Form Hooks: useForm 8. Animation Hooks: useSprings 9. Custom Hooks [Medium](https://medium.com/womenintechnology/what-are-the-different-types-of-hooks-in-react-470fdeb86b9)

a24danwe commented

2026-04-13 11:21:43 +00:00

Collaborator

Rules of using Hooks:

Only call Hooks at the top level

Reason: The order in which Hooks are called is important. If Hooks are placed inside loops, conditionals, or nested functions, react is not able to keep track of the order. The result of having inconsistency with Hook calls are that the apps behavior can break which will result in bugs and performance issues.

Example:

Breaks the rule:

function MyComponent() {
  if (someCondition) {
    // ❌ Breaking the rule: calling useState inside a conditional
    const [count, setCount] = useState(0);
  }

  return <div>Hello, world!</div>;
}

Correct way:

function MyComponent() {
  // ✅ Always call Hooks at the top level
  const [count, setCount] = useState(0);

  if (someCondition) {
    // You can use the value of count inside the condition
    return <div>{count}</div>;
  }

  return <div>Hello, world!</div>;
}

Only call Hooks from React Functions

Reason: Hooks were made with the purpose of managing state and effects in React components. So if Hooks were used outside of React Functions their behavior would break their intended use. React would not be able to handle it.

Example:

Breaks the rule:

function myHelperFunction() {
  // ❌ Breaking the rule: calling useState inside a regular function
  const [count, setCount] = useState(0);
  return count;
}

function MyComponent() {
  const count = myHelperFunction();
  return <div>{count}</div>;
}

Correct Way:

function MyComponent() {
  // ✅ Calling Hooks only in React function components
  const [count, setCount] = useState(0);

  return <div>{count}</div>;
}

Medium

Rules of using Hooks: 1. Only call Hooks at the top level Reason: The order in which Hooks are called is important. If Hooks are placed inside loops, conditionals, or nested functions, react is not able to keep track of the order. The result of having inconsistency with Hook calls are that the apps behavior can break which will result in bugs and performance issues. Example: **Breaks the rule:** ```html function MyComponent() { if (someCondition) { // ❌ Breaking the rule: calling useState inside a conditional const [count, setCount] = useState(0); } return <div>Hello, world!</div>; } ``` **Correct way:** ```html function MyComponent() { // ✅ Always call Hooks at the top level const [count, setCount] = useState(0); if (someCondition) { // You can use the value of count inside the condition return <div>{count}</div>; } return <div>Hello, world!</div>; } ``` 2. Only call Hooks from React Functions Reason: Hooks were made with the purpose of managing state and effects in React components. So if Hooks were used outside of React Functions their behavior would break their intended use. React would not be able to handle it. Example: **Breaks the rule:** ```html function myHelperFunction() { // ❌ Breaking the rule: calling useState inside a regular function const [count, setCount] = useState(0); return count; } function MyComponent() { const count = myHelperFunction(); return <div>{count}</div>; } ``` **Correct Way:** ```html function MyComponent() { // ✅ Calling Hooks only in React function components const [count, setCount] = useState(0); return <div>{count}</div>; } ``` [Medium](https://medium.com/@finnkumar6/the-rules-of-hooks-in-react-what-you-need-to-know-9a6f2ccbf5cc)

c24danli was assigned by c24elipe

2026-04-13 11:31:34 +00:00

a24danwe commented

2026-04-13 11:50:03 +00:00

Collaborator

What is a Hook?

A React Hook is a special function in React that lets developers use state and other React features without making a class. It makes code simpler and easier to manage by allowing functionality to be added directly within React components.

Medium

What is a Hook? A React Hook is a special function in React that lets developers use state and other React features without making a class. It makes code simpler and easier to manage by allowing functionality to be added directly within React components. [Medium](https://www.uxpin.com/studio/blog/react-hooks/)

a24danwe commented

2026-04-13 12:26:50 +00:00

Collaborator

What is a Custom Hook?

Custom Hook is a JavaScript function that starts with "use". It allows a user to define hooks for specific purpose. For example a hook for fetching data. It usually combines one or more built in React Hooks. The custom hook would, for example be named "useFetch". One reason for using Custom Hook is to remove duplication of code.

Medium

What is a Custom Hook? Custom Hook is a JavaScript function that starts with "use". It allows a user to define hooks for specific purpose. For example a hook for fetching data. It usually combines one or more built in React Hooks. The custom hook would, for example be named "useFetch". One reason for using Custom Hook is to remove duplication of code. [Medium](https://deadsimplechat.com/blog/custom-hooks-react/)

a24danwe commented

2026-04-13 12:54:15 +00:00

Collaborator

How to create a Custom Hook:

Identify duplication of code.
Declare a function and name it something with "use" first, for example "useFetch".
Make the file(e.g. useFetch.js), create the function and then export it.
Import the Custom Hook in main file(Main.js).

Medium

How to create a Custom Hook: 1. Identify duplication of code. 2. Declare a function and name it something with "use" first, for example "useFetch". 3. Make the file(e.g. useFetch.js), create the function and then export it. 4. Import the Custom Hook in main file(Main.js). [Medium](https://deadsimplechat.com/blog/custom-hooks-react/)

a24noabe commented

2026-04-13 13:15:25 +00:00

Collaborator

Hooks let you use different React features from your components.

useState():
The useState function returns a pair [state-variable, setter]. The setter should always be used to change the state. State variables have two main functions:

Saving data between renders. When a re-render occurs, all local variables return to their initial values. useState lets components save and change data between renders. The component remembering data is useful for when changing something that needs the component to be rendered again, like changing what data is displayed.
The setter causes a re-render. When data changes, we want to be able to see that. Updating a local variable doesn't change the look of the component. If for example the forecast gets updated, then the card containing that data should also be updated. Using the setter ensures that the new state gets shown on the site.

useContext():
Allows components to retrieve data from parents far up the component tree. You can for example get the current theme from the root element without having to pass it down as a prop to each and every component.. Context is created by using the createContext() function.

useEffect():
Simplified a bit from here. There are two types of logic in a react component:

Rendering code, pure functions that run when the component is rendered and return HTML, and
Event handlers, code nested inside component. This code is run when users interact with components and handles the user interaction by changing states and whatever.

Unlike rendering code and event handlers which are only executed on rendering and user interaction, useEffect allows a function to be run after react is finished rendering. It's mostly used when 'synchronizing' with external systems (eg. fetching data from API) since it allows the website to be rendered before waiting on responses from external systems.

[Hooks let you use different React features from your components.](https://react.dev/reference/react/hooks) useState(): The useState function returns a pair [state-variable, setter]. The setter should **always** be used to change the state. State variables have two main functions: - **Saving data between renders.** When a re-render occurs, all local variables return to their initial values. useState lets components save and change data between renders. The component remembering data is useful for when changing something that needs the component to be rendered again, like changing what data is displayed. - **The setter causes a re-render.** When data changes, we want to be able to see that. Updating a local variable doesn't change the look of the component. If for example the forecast gets updated, then the card containing that data should also be updated. Using the setter ensures that the new state gets shown on the site. useContext(): Allows components to retrieve data from parents far up the component tree. [You can for example get the current theme from the root element without having to pass it down as a prop to each and every component.](https://react.dev/reference/react/hooks#context-hooks). Context is created by using the [createContext()](https://react.dev/reference/react/createContext#creating-context) function. useEffect(): [Simplified a bit from here.](https://react.dev/learn/synchronizing-with-effects) There are two types of logic in a react component: - **Rendering code**, [pure functions](https://react.dev/learn/keeping-components-pure) that run when the component is rendered and return HTML, and - **Event handlers**, code nested inside component. This code is run when users interact with components and handles the user interaction by changing states and whatever. Unlike rendering code and event handlers which are only executed on rendering and user interaction, useEffect allows a function to be run after react is finished rendering. It's mostly used when '[synchronizing](https://react.dev/learn/synchronizing-with-effects)' with external systems (eg. fetching data from API) since it allows the website to be rendered before waiting on responses from external systems.

hGustavs commented

2026-04-13 13:32:00 +00:00

Owner

Are we creating this for the coding standard?

That is a very good idea since there are many ways to do the same thing in react, and I prefer that we choose a small subset to make the code more maintainable.

Are we creating this for the coding standard? That is a very good idea since there are many ways to do the same thing in react, and I prefer that we choose a small subset to make the code more maintainable.

a24danwe commented

2026-04-13 13:55:29 +00:00

Collaborator

Advantages to using Hooks:

Simplicity and Readability: Using Hooks will lead to a more concise and easy to read code. This will then make it a better developer experience for those who are new to react.
Code Reusability: Using Hooks makes it easy to build reusable logic. For example by moving common tasks into Custom Hooks, we can use that Hook across multiple different components without repeating ourselves.
No Need for Classes: Hooks allow us to move away from class components entirely and allows for a purely functional approach. This also aligns with React best practices.

Medium

Advantages to using Hooks: - **Simplicity and Readability**: Using Hooks will lead to a more concise and easy to read code. This will then make it a better developer experience for those who are new to react. - **Code Reusability**: Using Hooks makes it easy to build reusable logic. For example by moving common tasks into Custom Hooks, we can use that Hook across multiple different components without repeating ourselves. - **No Need for Classes**: Hooks allow us to move away from class components entirely and allows for a purely functional approach. This also aligns with React best practices. [Medium](https://www.geeksforgeeks.org/reactjs/advantages-and-disadvantages-of-using-hooks-compared-to-class-components/)

a24danwe commented

2026-04-13 14:08:31 +00:00

Collaborator

Disadvantages to using Hooks:

Compatibility Issues: Hooks were created in React 16.8 and there are some already existing codebases that are using heavily incorporated class components. Switching to Hooks might take a lot of effort, time and money.
Backward Compatibility: Hooks are not backward compatible with class components. This means that any migration from using class based code to Hooks will require a significant refactoring.

Disadvantages to using Hooks: - **Compatibility Issues**: Hooks were created in React 16.8 and there are some already existing codebases that are using heavily incorporated class components. Switching to Hooks might take a lot of effort, time and money. - **Backward Compatibility**: Hooks are not backward compatible with class components. This means that any migration from using class based code to Hooks will require a significant refactoring.

a24danwe commented

2026-04-13 14:11:17 +00:00

Collaborator

@hGustavs wrote in #250 (comment):

Are we creating this for the coding standard?

That is a very good idea since there are many ways to do the same thing in react, and I prefer that we choose a small subset to make the code more maintainable.

Yes

@hGustavs wrote in https://git.webug.se/Andras/BoundlessFlowCampus2K/issues/250#issuecomment-2412: > Are we creating this for the coding standard? > > That is a very good idea since there are many ways to do the same thing in react, and I prefer that we choose a small subset to make the code more maintainable. Yes

a24noabe commented

2026-04-14 11:37:02 +00:00

Collaborator

I've written a bit about react and how it works on the wiki. It's not quite done yet but some input would be nice. Some of the information is taken from #114

I've written a bit about react and how it works on the [wiki](https://git.webug.se/Andras/BoundlessFlowCampus2K/wiki/React). It's not quite done yet but some input would be nice. Some of the information is taken from #114

a24noabe added the

needs review

label

2026-04-14 11:38:21 +00:00

a24danwe commented

2026-04-14 12:09:09 +00:00

Collaborator

Should have a section explaining props. Right now you jump into an example "The Card function takes two props (parameters): { title, children }." but beginners might not know what props are.

a24danwe commented

2026-04-15 12:18:51 +00:00

Collaborator

Review of the React wiki

I have reviewed the official React documentation and compared it with this React wiki

The current wiki is overall correct and provides a good understanding of the topics shown. However there are some areas missing that would make the wiki more complete. As mentioned the JSX section is currently not there and must be added. The wiki could also be improved by adding a section explain prop and state and maybe the difference between them. While props are used as examples it is not fully explained. Another important topic in react that is missing is event handling for example, "onClick".

Overall, good wiki but missing some areas such as, JSX, prop and state, event handling.

Review of the React wiki I have reviewed the official React documentation and compared it with this React wiki The current wiki is overall correct and provides a good understanding of the topics shown. However there are some areas missing that would make the wiki more complete. As mentioned the JSX section is currently not there and must be added. The wiki could also be improved by adding a section explain prop and state and maybe the difference between them. While props are used as examples it is not fully explained. Another important topic in react that is missing is event handling for example, "onClick". Overall, good wiki but missing some areas such as, JSX, prop and state, event handling.

a24danwe added

reviewed

and removed

needs review

labels

2026-04-15 22:06:37 +00:00

c24elipe removed the

reviewed

label

2026-04-16 06:49:30 +00:00