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.
Related
I have read in the Expo/RN documentation, that for getting the system color (dark/light) we should use this API from react native.
So, I have decided to create my custom hook
import { Appearance } from "react-native";
export default function useIsDarkModeEnabled() {
return Appearance.getColorScheme() === "dark";
}
But for some reason, it is always returning me false. I am testing on iOS 14, with dark theme enabled.
Any ideas?
Whenever I check the current appearance of the device I use the useColorScheme() function, not getColorScheme().
You can use Context to persist it throughout the application, or put it at the root of your app and pass it down to your components as props (not the best). To persist the theme, you can use AsyncStorage to store the last state of the appearance.
Then whenever the application opens, it will pull that last state unless the device has changed its appearance since then.
I heard that strict mode helps to write React code in best practices way by throwing warnings for life cycle methods removal. I read about it from this article on Medium.
Is my understanding correct? How effective is strict mode? Is it only for unsafe life cycle methods? If not can I use this feature in functional components?
import { StrictMode } from "react";
class Test extends Component{
render(
<StrictMode>
//Some other child component which has all lifecycle methods implemented in it
</StrictMode>
);
}
React's StrictMode is sort of a helper component that will help you write better React components, you can wrap a set of components with <StrictMode /> and it'll basically:
Verify that the components inside are following some of the recommended practices and warn you if not in the console.
Verify the deprecated methods are not being used, and if they're used strict mode will warn you in the console.
Help you prevent some side effects by identifying potential risks.
As the documentation says, strict mode is development oriented so you don't need to worry about it impacting on your production build.
I've found it especially useful to implement strict mode when I'm working on new code bases and I want to see what kind of code/components I'm facing. Also if you're on bug hunting mode, sometimes it's a good idea to wrap with <StrictMode /> the components/blocks of code you think might be the source of the problem.
So yeah, you're in the correct path to understanding strict mode, keep it up, I think it's one of those things you understand better when you play with them, so go ahead and have some fun.
Warning: StrictMode will render the components twice only on the development
mode not production.
For instance, if you're using getDerivedStateFromProps method like so:
static getDerivedStateFromProps(nextProps, prevState){// it will call twice
if(prevState.name !== nextProps.name){
console.log(`PrevState: ${prevState.name} + nextProps: ${nextProps.name}`)
return { name: nextProps.name }
}
return {}
}
The getDerivedStateFromProps method will call twice.
Just to let you know this is not a problem, it's just because you're wrapping your main component with <StrictMode> in the index.js file.
StrictMode renders components twice in order to detect any problems with your code and warn you about them.
In short, StrictMode helps to identify unsafe, legacy, or deprecated APIs/lifecycles. It's used for highlighting possible problems. Since it's a developer tool, it runs only in development mode. It renders every component inside the web app twice in order to identify and detect any problems in the app and show warning messages.
StrictMode is a tool for highlighting potential problems in an application. Like Fragment, StrictMode does not render any visible UI. It activates additional checks and warnings for its descendants.
After changing nothing all of my previously working class components cause a ComponentException. All my function components still work fine; it is only the class components that fail. The class components extend React.Component and have a render method that returns a View so I'm unsure whats wrong. I've tested on my phone as well as the iOS Simulator and both fail similarly.
Turns out I messed up a bunch of imports by changing the export in one of my most used files! My bad, I should have read the error message more carefully.
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.
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.