Welcome to Ismoil Shokirov's blog!

Ismoil logs


You might have seen such a Javascript file containing _**use strict;**_ on top

```js
"use strict";
```
It is quite an important statement which makes a Javascript to run in a strict mode

It is very handy to get rid of potential bugs, let's take a look to some examples


```js
myVariable = 10
console.log(10)
```
It is just going to log `10` with no errors, even thogh we didn't use var, let or const keywords

```
10
```

However, if you use the strict mode like this:
```java
"use strict";

myVariable = 10
console.log(10)

// Result:
Uncaught ReferenceError: myVariable is not defined
```

Without strict mode being used you can do really weird things with Javascript
```js
undefined = "defined"
```
Value of **undefined** won't be changed because it **is ready only**, but it won't also print any errors

```java
"use strict";

undefined = "defined"

// Result:
Uncaught TypeError: Cannot assign to read only property 'undefined'
```

Let's also have a look to the following script:

```javascript

function combine(x, x, z) {
    return [x, x, z]
}

console.log(combine(1,2,3))

// Result:
[2,2,3] // because value of x is overwritten
```

It is just meaningless to redifine a function parameter

```java
"use strict";

function combine(x, x, z) {
    return [x, x, z]
}

console.log(combine(1,2,3))

// Result:
Uncaught SyntaxError: Duplicate parameter name 
not allowed in this context
```



> Good news for those who use `module exports and imports`, because they use the strict mode by defautl.
Moreover, class definitions will also use the strict mode.


If you are interested in more details about **"use strict"**, I recommend you to watch [this video](https://www.youtube.com/watch?v=G9QTBS2x8U4)

This time we will discuss what is 'use strict' and why it is needed

What is "use strict" in Javascript and its importance


First of all we need to remember that in ReactJS **window** object is available only after the component is mounted.
So, we can use a **useEffect** hook to subscribe for **_window resize_** event and unsubscribe from it on component unmount.

```js
const useDeviceSize = () => {

  const handleWindowResize = () => {}

  useEffect(() => {
    // component is mounted and window is available
    handleWindowResize();
    window.addEventListener('resize', handleWindowResize);
    // unsubscribe from the event on component unmount
    return () => window.removeEventListener('resize', handleWindowResize);
  }, []);
  
}
```

Next up we need a state to keep track of width and height of the window
```js
const useDeviceSize = () => {
  const [width, setWidth] = useState(0)
  const [height, setHeight] = useState(0)

  const handleWindowResize = () => {
    setWidth(window.innerWidth);
    setHeight(window.innerHeight);
  }

  ...
}
```

Complete code snippet of **useDeviceSize()** hook:

```js
import React, {useState, useEffect} from 'react'

const useDeviceSize = () => {

  const [width, setWidth] = useState(0)
  const [height, setHeight] = useState(0)

  const handleWindowResize = () => {
    setWidth(window.innerWidth);
    setHeight(window.innerHeight);
  }

  useEffect(() => {
    // component is mounted and window is available
    handleWindowResize();
    window.addEventListener('resize', handleWindowResize);
    // unsubscribe from the event on component unmount
    return () => window.removeEventListener('resize', handleWindowResize);
  }, []);

  return [width, height]

}

export default useDeviceSize 
```

**Below is the use case of our hook:**
```js
import React from 'react'
import useDeviceSize from './yourPathToHook'

const ExampleComponent = () => {
    const [width, height] = useDeviceSize()

    return (
        <div>
            width of window: {width}
            height of window: {height}
        </div>
    )
}
```

Go back [home](/).

We will create a react hook called useDeviceSize() to get the window.width and window.height

How to dynamically get window width and height in ReactJS


Assuming that you already have a react app running, we will start by modifiying `App.js`

We will create 2 contexts:
    - To store theme value (ThemeContext)
    - To update theme value (ThemeContextUpdate)

Start
1. We will create a separate file called `ThemeContext.js` for our context

```jsx
import {useState, useContext, createContext} from 'react'

// create a new context to store value
const ThemeContext = createContext()

// create a new context to update value
const ThemeContextUpdate = createContext()

// create a hook to access the value of context
// we will use this hook later in MyComponent.js
export const useTheme = () => {
    return useContext(ThemeContext)
}

export const useThemeUpdate = () => {
    return useContext(ThemeContextUpdate)
}

export const ThemeProvider = ({children}) => {
    const [theme, setTheme] = useState('light')

    const toggleTheme = () => {
        setTheme(prev => prev === 'light' ? 'dark' : 'light')
    }

    return (
        <ThemeContext.Provider value={theme}>
            <ThemeContextUpdate.Provider value={toggleTheme}>
                {children}
            </ThemeContextUpdate.Provider>
        </ThemeContext.Provider>
    )
}
```

2. Inside `App.js` wrap its children with `ThemeProvider`

```jsx
import {ThemeProvider} from './ThemeContext'
import {MyComponent} from './MyComponent'

export const App = () => {

    return (
        <ThemeProvider>
            <MyComponent />
        </ThemeProvider>
    )
}
```

3. Create `MyComponent.js` which will have access to our theme from context

```jsx
import {useTheme, useThemeUpdate} from './ThemeContext'

export const MyComponent = () => {
    const theme = useTheme()
    const toggleTheme = useThemeUpdate()

    return (
        <div>
            <h1>Current theme is: {theme}</h1>
            <button onClick={toggleTheme}>Change theme</button>
        </div>
    )
}
```

## Take a look to the [`demo`](/examples/react-dark-theme)

In this tutorial we will create a theme toggler using React.context

Welcome to Ismoil Shokirov's blog!

What is "use strict" in Javascript and its importance

How to dynamically get window width and height in ReactJS

Create a dark/light theme in ReactJS