I am creating a react native app with expo. When I run ESlint, I receive over 100 errors concerning react/prop-types. Most of the errors look like this:
18:37 error 'route' is missing in props validation react/prop-types
I understand that I can validate all of my proptypes with code that looks like this:
import PropTypes from "prop-types";
...
App.propTypes = {
route: PropTypes.object.isRequired,
};
However my app works fine without prop validation (at least, it seems to work fine). Is it necessary to validate all of my props, or can I simply silence the ESlint error without harming my app?
This validation is used to enhance the development process and bug detection.
It doesn't make the app safer directly.
You can disable this option entirely if you don't like it.
Typing is really helpful to understand your code later on and to avoid bugs, but is not required. I personally prefer using Typescript in combination with React. Giving components an Interface makes propTypes obsolete.
Related
I am using nextjs along with tailwind css and a bunch of other libraries like web3uikit.
the app work totally fine but as soon as I import ConnectButton from web3uikit and use it in the sidebar component, it gives me the following error:
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
Here's the link to the github repo, just cloning and install the dependencies would help you in setting up the project and then npm run dev.
Link: https://github.com/oneknucklehead/marketplace-web3
I believe it is a server-side rendering issue! A screenshot of how I got the <ConnectButton /> to render in a nextjs application is below:
Implementing the ConnectButton Component Screenshot
When the error popped up saying I had an invalid hook call, I closed the error box and the button was rendered in and when I click on it, it showed the web3Modal with the proper sign-in options. I thought that maybe it was a server-side issue
So I fixed it by using a useState hook with a boolean value as seen in the screenshot. It is false by default but will only become true when the component loads in(used a useEffect hook to implement) and I take advantage of that via conditional rendering which is also shown in the screenshot. Once I did that, I haven't encountered the issue at all! Hope this helps!
Go to node_modules -> web3uikit-> node_modules and delete the react folder under it.
web3uikit node module has a version of react pre-installed with it. Apparently, that's causing errors. Now, why does deleting the folder fix the error? Honestly, I don't know, but it removed the error. This answer is from someone named David MacDonald.
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.
I was following this tutorial to understand how to use redux-toolkit in a React project.
https://redux-flash-cards.netlify.com/
I was able to compile and execute the project successfully.
Due to restrictions in my current project, I am not able to use Typescript for this React project, so I am trying to use the same project only with javascript.
So, I started to rewrite some of the code in the Javascript way. However, there are some incompatibilities that I do not know how to solve.
My problem is that I'm geeting an error
'type arguments' can only be used in a .ts file
in the line (16) of flash-cards/src/redux/store.ts.
export type RootState = ReturnType<typeof store.getState>
I think that it is becasue Javascript cannot use types.
The above problem is causing other errors on lines 25, 30 and 31 of flash-cards/src/App.tsx, because this file cannot import the previous file (in JS version). So I don't know how to do (line 25)
import { RootState } from "./redux/store"
Somebody was suggesting me to use flow or proptypes to solve the problem, but really I got lost finding the correct solution.
I will appreciate a lot if you can give a hand to solve this problem.
Thanks
I was using an incorrect path and double store.
I have a custom component(not React) on my page, and flow thinks that it's a React Component and tries to resolve it with React. See the below picture.
Is there any way to tell flow that this is a custom web component and stop it from throwing type error?
For now, there is a workaround to tell flow that this is something to do with Snabbdom. Well actually below the line(#1) is intended for Babel but Flow is smart enough to interpret that and resolve.
// #jsx snabbdom.createElement
import snabbdom from 'snabbdom-renderer'; // eslint-disable-line no-unused-vars
I am just wondering if there is any concrete fix for this?
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.