We Keep Coding

Why useState calls function twice? [duplicate]

My React Component is rendering twice. So, I decided to do a line-by-line debug, and the problem is here:
if ( workInProgress.mode & StrictMode) {
instance.render();
}
React-dom.development.js
Is it because of the strict mode? Can I disable it? What is Strict Mode? Do I need it?

StrictMode renders components twice (on dev but not production) in order to detect any problems with your code and warn you about them (which can be quite useful).
If you have StrictMode enabled in your app but don't remember enabling it, it might be because you used create-react-app or similar to create your app initially, which automatically enables StrictMode by default.
For example, you might find that your {app} is wrapped by <React.StrictMode> in your index.js:
ReactDOM.render(
<React.StrictMode>
{app}
</React.StrictMode>,
document.getElementById('root')
);
If so, you can disable StrictMode by removing the <React.StrictMode> tag:
ReactDOM.render(
{app}
document.getElementById('root')
);

Yes you have to remove Strict mode as
Strict mode can't automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions: Class component constructor , render , and shouldComponentUpdate methods.
Source: React Docs: Strict Mode

For Next.js user here like my-self,
strict mode is also enabled by default and causes this issue.
You can disable it in this way
// next.config.js
module.exports = {
reactStrictMode: false,
}

It seems the component renders twice, but the first rendered component is not unmounted? At least that is the behaviour I'm seeing with React 17, might a bug in my code of course

In a React app with StrictMode:
If you are seeing dual console logs like this:
And if you know that StrictMode helps you optimize your app in some way
And you don't want to disable StrictMode entirely
Then:
The React Developer Tools Chrome Extension offers an option to Hide logs during second render in Strict Mode. To enable that:
Install the extension.
In your Chrome Developer Tools window, a new tab called Components is created. Click on it.
Then click the gear icon inside the components tab.
Then select the Debugging tab, and check the option to Hide logs during second render in Strict Mode.
You will no more see the dual logs in the console.

if you are using nextjs and you want to disable strict mode go to your next.config.js file and set reactStrictMode to false
module.exports = {
reactStrictMode: false,
};
but strict mode is recommended for development once you check if the double mount is caused by stric mode it's preferable to enable it

React redux testing by logging on console without a front end rendering part

I am learning React redux and I am completely new to its workflow. Although I have significant experience with Haskell, Javascript, and some experience with node.js type web dev. I am following this doc: https://redux.js.org/basics/store, in the section Dispatching Actions, I see this bit of code:
import {
addTodo,
toggleTodo,
setVisibilityFilter,
VisibilityFilters
} from './actions'
​
// Log the initial state
console.log(store.getState())
Suggesting I could log to the console without UI. I am confused because where would I log to console if I am not running a GUI? As I understand all of react is running on client side, so where would I call index.js to run it? My directory currently is like this:
src
App.tsx
todo
actions.tsx
reducer.tsx
index.tsx <--- this is where the console.log would be
More broadly, I am asking about an equivalment to a repl development workflow to react redux. For example I do log to console using vanilla js and node, even though there may be better options, it's a matter of comfort.

import index.tsx to a component being rendered, in your case, import to App.tsx
for example:
//index.tsx
const testLog = (message) => {
window.console.log(message)
}
export default testLog
then on App.tsx assuming its a stateful component:
// App.tsx
import * as React from 'react'
import TestLog from './todo/index'
class App extends React.PureComponent {
public componentDidMount(){
TestLog('hello')
}
public render(){
return(
<div>test</div>
)
}
}
export default App
You can also use global.console.log() on TypeScript

I was going to write a comment but it got bigger so here it is as an answer.
It logs to browser's web developer console. Docs would be not so clear but actually you are using a javascript file there and use it in some html file and inspect it with your browser.
So, when you console.log, you have a GUI and see the result in your dev tools console. Obviously you need to use getState() where your store created and that file must be run somehow.
I suggest you watching those two tutorials from the creator of Redux. They are great and let you understand what is under the hood of Redux and how things get glued together.
Getting Started With Redux
Building React Applications with Idiomatic Redux
If you are so new to React first go without Redux, then after digesting React go for Redux. As a learner and not so much experienced with Javascript, I've learned quite a bit with this order.

There are several places you can check your redux logs.
Using reducer
You will have a function called a reducer where the dispatches hits. So eigther you can log your dipatches.
mapStateToProps
The first parameter of this function is the value of state in the store. So any changes to the store will be available to this function when you connect a component with this function.
middleware
You can add a middleware using applymiddleware function to the store while its getting created.
You can check out redux-logger an npm module which uses this layer.

Can the end-user edit a React Component's state?

Say I have a React Component like
class User extends React.Component{
constructor(props){
super(props);
this.state={userId:""}
}
componentWillMount(){
this.setState({userId: cookies.get('id')});
}
componentHasMounted(){
getSensitiveLoginData(this.state.userId);
}
render(){
return <SomeSensitiveData/>
}
}
Would it be possible for the end-user to somehow edit the component's state? Could the end-user, in this scenario, edit the state's userId?

It is really easy to edit the state of a component. You do not need any ninja skills. All it takes is to install the React Dev Tools extension in Chrome for example.
With this extension, whenever you open your Dev Tools in Chrome, a new Tab appears, named React. It allows you to view the DOM as seen by React's component hierarchy. It also allows you to inspect each component individually. While inspecting a component, you can easily change it's props and/or state, through an inline-editable style GUI.
Even if it wasn't for React Dev Tools, there are always ways for the client to manipulate it's own data. As Joseph the Dreamer said in the comments, server-side validation is always a must.

Changing the devise locale in React-native

I have successfully installed react-native-i18n and its works fine. However, I want to change the locale inside the React native app itself.
I have added a button( Touchable opacity ) and have written the following code :
onPress={() => { i18n.locale = 'ar'; }}
However, this does not change the locale to 'ar' and all my translations are still coming for english ( en-US ) only. I dont want the user to go to phone settings and change the locale from there. Can I not do it from the app itself? Only so that the locale is limited for my app only.

You need to rerender the app. Listen for ConfigurationChange event to rerender or you may refer this GitHub issue. Easier hack is to set a state once you do i18n.locale = 'ar' :)

Props not being passed into component when using react-native-router-flux with react-redux?

I've run into an issue where after issuing an action via Redux, the store updates just fine (verified with redux-logger) but the connected component's props do not seem to update.
Components (tapping the login button is supposed to bring up the loading screen): https://github.com/OC-Hackers/Volunteer-App-Native/blob/master/src/react/login.js
https://github.com/OC-Hackers/Volunteer-App-Native/blob/master/src/react/loading.js
Reducer: Navigate to src/redux/reducers/session.js and you'll find it.
Action generator: Navigate to src/redux/actions/session.js and you'll find it, I can't post more than 2 links without more rep.
The loading dialog will only display if this.props.success.show is true, but despite redux-logger showing that it's set to true, the dialog never shows. I've looked through my mapStateToProps method and it looks almost exactly like the example one in the Redux tutorial, and I've verified that the component is actually connected. Where am I screwing up?

Your Loading component's mapState function looks wrong. You're returning state.success and state.fetching, but you're defining those fields inside of your sessionReducer. It looks like you need to return state.session.success and state.session.fetching instead.